jQuery表格的增加刪除是網(wǎng)站開發(fā)過程中常用的功能之一。通過jQuery的靈活性,我們可以輕松實現(xiàn)表格的添加、刪除等操作,提高網(wǎng)站的交互性,下面介紹如何實現(xiàn)表格的增加刪除。
// 添加數(shù)據(jù) $("button#addBtn").click(function() { // 獲取表單數(shù)據(jù) let name = $("input[name='name']").val(); let age = $("input[name='age']").val(); let sex = $("input[name='sex']").val(); // 根據(jù)數(shù)據(jù)創(chuàng)建表格行 let tr = "<tr><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td><td><button class='deleteBtn'>刪除</button></td></tr>"; // 使用append方法將表格行添加到表格中 $("table tbody").append(tr); // 清空表單數(shù)據(jù) $("input[name='name']").val(""); $("input[name='age']").val(""); $("input[name='sex']").val(""); }); // 刪除數(shù)據(jù) $("table tbody").on("click", "button.deleteBtn", function() { // 使用closest方法找到父級tr,并將其刪除 $(this).closest("tr").remove(); });
以上代碼演示了如何添加和刪除表格數(shù)據(jù),通過獲取表單數(shù)據(jù)創(chuàng)建新的表格行,然后使用append方法將其添加到表格中。當需要刪除表格行時,使用closest方法找到父級tr,然后將其刪除即可。