jQuery是一種流行的JavaScript庫,它被廣泛使用于網站開發中。其中的表格編輯功能是很有用的,它可以讓用戶對表格進行動態編輯和刪除操作。下面我們就來介紹一些jQuery表格編輯的實現方式。
$(document).ready(function(){ // 綁定“添加行”按鈕 $("#addRowBtn").click(function(){ // 獲取表格的最后一行 var lastRow = $("#myTable tr:last"); // 復制最后一行,并清空input的值 var newRow = lastRow.clone().find("input").val("").end(); // 將新行添加到表格中 lastRow.after(newRow); }); // 綁定“刪除行”按鈕 $("#deleteRowBtn").click(function(){ // 獲取選中行的checkbox var checked = $("#myTable input:checked"); // 遍歷選中行 checked.each(function(){ // 獲取當前行并移除 var row = $(this).closest("tr"); row.remove(); }); }); });
通過以上代碼,我們可以在頁面上添加一個“添加行”按鈕和一個“刪除行”按鈕。點擊“添加行”按鈕時會在表格最后新增一行,并清空輸入框的值。點擊“刪除行”按鈕時,遍歷選中的行并一一刪除。
值得注意的是,以上代碼只是一種示例,要根據具體的需求進行相應的修改。但使用jQuery實現表格的動態編輯和刪除是一種常用的方法,希望這篇文章能給大家帶來幫助。
上一篇div id格式