html table+css實現(xiàn)可編輯表格的示例代碼
發(fā)布時間:2024-03-06 16:26:50 作者:xingdiango
我要評論

本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼,主要使用HTML5的contenteditable屬性,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
要實現(xiàn)可編輯的 HTML 表格,你可以使用 JavaScript 和 HTML5 的 contenteditable 屬性。
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } </style> </head> <body> <table id="editableTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td contenteditable="true">John Doe</td> <td contenteditable="true">25</td> <td contenteditable="true">Male</td> </tr> <tr> <td contenteditable="true">Jane Smith</td> <td contenteditable="true">30</td> <td contenteditable="true">Female</td> </tr> <!-- 添加更多行 --> </tbody> </table> <script> // 獲取可編輯表格 var table = document.getElementById('editableTable'); // 遍歷表格,為每個單元格添加事件偵聽器 for (var i = 0; i < table.rows.length; i++) { for (var j = 0; j < table.rows[i].cells.length; j++) { table.rows[i].cells[j].addEventListener('input', function () { // 處理輸入事件,可以在此處進行邏輯處理或保存數(shù)據(jù) console.log(this.textContent); }); } } </script> </body> </html>
在上述示例中,使用了 contenteditable 屬性來使表格單元格可編輯。添加 contenteditable="true" 屬性的單元格可以被鼠標點擊并接受用戶輸入。
JavaScript 部分遍歷表格的所有單元格,并為每個單元格添加輸入事件偵聽器。在輸入事件處理程序中,你可以根據(jù)需要處理用戶的輸入,比如更新數(shù)據(jù)或觸發(fā)其他操作。
點擊表格前:
點擊表格后:
到此這篇關(guān)于html table+css實現(xiàn)可編輯表格的示例代碼的文章就介紹到這了,更多相關(guān)html可編輯表格 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了HTML用正則表達式檢驗表格的實例代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-08
- 這篇文章主要介紹了html做表格只顯示表格的外邊框,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-20
使用html5實現(xiàn)表格實現(xiàn)標題合并的實例代碼
在前端開發(fā)中經(jīng)常會遇到標題合并的需求,今天小編給大家?guī)砹耸褂胔tml5實現(xiàn)表格實現(xiàn)標題合并的實例代碼,感興趣的朋友跟隨小編一起看看吧2019-05-13- 這篇文章主要介紹了html+js 實現(xiàn)markdown編輯器效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2019-10-23
- 這篇文章主要介紹了HTML表格,包括表格的作用布局及格式問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-31
- 表格是日常常用的工具,很多時候需要用到單元合并,本文主要介紹了HTML表格合并的具體實現(xiàn)方式, 具有一定的參考價值,感興趣的可以了解一下2023-01-05