HTML5是一種新型的標準化標記語言,為網頁提供了許多功能和特性,其中之一就是能夠輕松添加刪除一列按鈕的代碼。
<table id="myTable"> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th></th> </tr> <tr> <td>張三</td> <td>男</td> <td>25</td> <td><button onclick="deleteRow(this)">刪除行</button></td> </tr> <tr> <td>李四</td> <td>女</td> <td>30</td> <td><button onclick="deleteRow(this)">刪除行</button></td> </tr> </table>
通過上述代碼,我們可以看到添加了一個id為myTable的表格,并在每一行中添加一個帶有onclick事件的刪除行按鈕,這將在點擊按鈕時調用deleteRow(this)函數。
function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); }
該函數的功能很簡單:當用戶點擊按鈕時,它獲取到該按鈕的父節點,并將整個行從DOM中刪除。
這里需要注意的一點是,由于js獲取的內容都是以0為起始的索引,所以我們必須從父節點的父節點開始刪除,否則我們將無法獲取整行。
在這種情況下,使用HTML5來添加刪除一列按鈕是很容易的,使用上述代碼可以輕松完成。如果您有帶表格的網頁,那么這將是一個不錯的增強功能。
下一篇html5初始頁面代碼