jQuery是一款非常流行的JavaScript庫,它可以簡化JavaScript代碼的編寫,特別是在處理DOM(文檔對象模型)的時候,jQuery提供了非常方便的操作方法,比如添加刪除表格
首先,我們需要先創建一個表格,用于例子演示。
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>20</td> <td>男</td> <td><button class="delete">刪除</button></td> </tr> <tr> <td>李四</td> <td>25</td> <td>女</td> <td><button class="delete">刪除</button></td> </tr> </tbody> </table>
以上是一個簡單的表格,每一行都有一個“刪除”按鈕,用于刪除對應的行。
接下來就是需要用到jQuery的代碼了。我們可以通過jQuery提供的.click()
方法,給這些刪除按鈕綁定一個點擊事件,并且在事件處理函數中,通過.parent()
和.remove()
方法,來刪除對應的一行。
$(document).ready(function() { $('.delete').click(function() { $(this).parent().parent().remove(); }); });
以上代碼的作用就是,在文檔加載完畢后,給所有的“刪除”按鈕綁定一個點擊事件,當點擊“刪除”按鈕時,找到該按鈕的父節點的父節點,也就是對應的表格行,再通過.remove()
方法來刪除它。
通過這樣的方式,我們就可以非常方便地實現在表格中添加和刪除行的操作了。
上一篇將行均分css
下一篇jquery 添加顯示