jQuery作為一種非常流行的javascript庫(kù),提供了許多方便快捷的方法來(lái)操作HTML DOM元素,其中就包括表格操作。
在表格中動(dòng)態(tài)刪除一行是很常見(jiàn)的需求。首先,我們需要編寫一些HTML代碼來(lái)創(chuàng)建我們的表格:
<table id="my-table"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>18</td> <td>男</td> <td><button class="delete-row">刪除</button></td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> <td><button class="delete-row">刪除</button></td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> <td><button class="delete-row">刪除</button></td> </tr> </tbody> </table>
上面的HTML代碼中,我們創(chuàng)建了一個(gè)包含表頭和表格主體的表格,并給每個(gè)刪除按鈕添加了一個(gè)class“delete-row”。
接下來(lái),我們使用jQuery選擇器選擇每個(gè)刪除按鈕,并在按鈕上添加一個(gè)“click”事件處理程序,以便在單擊按鈕時(shí)刪除它所在的表格行:
$(document).ready(function() { $('.delete-row').click(function() { $(this).closest('tr').remove(); }); });
上面的jQuery代碼中,我們使用closest()方法找到按鈕父級(jí)節(jié)點(diǎn)中最近的tr元素,然后使用remove()方法將其刪除。
通過(guò)以上步驟,我們就成功地實(shí)現(xiàn)了在表格中動(dòng)態(tài)刪除一行的效果。