JQuery是一種非常流行的JavaScript庫,它可以簡化Web開發中的許多任務。在本文中,我們將介紹如何使用JQuery來添加和刪除表格的行數據,以方便動態地修改數據。
//添加行數據 $("#add-row-btn").click(function(){ //創建一個新的行 var newRow = $("<tr></tr>"); //添加新的單元格到行中 newRow.append("<td>John</td>"); newRow.append("<td>Doe</td>"); newRow.append("<td>johndoe@example.com</td>"); //將新的行添加到表格中 $("#table-body").append(newRow); }); //刪除行數據 $("#delete-row-btn").click(function(){ //獲取表格的最后一行 var lastRow = $("#table-body tr:last"); //刪除最后一行 lastRow.remove(); });
在上面的代碼中,我們使用了兩個按鈕:一個用于添加行數據,另一個用于刪除行數據。添加功能非常簡單:我們創建一個新的行,添加單元格到行中,然后將這個新的行添加到表格中。刪除功能也很簡單:我們獲取表格的最后一行,并將其從表格中刪除。
通過使用JQuery,我們可以輕松地添加和刪除表格的行數據,這對于快速而方便地修改數據非常有用。希望我們的教程對你有所幫助!
上一篇div style賦值
下一篇div style