jQuery是一種非常方便的JavaScript庫,它可以方便地操作HTML元素來實現(xiàn)各種功能。其中,表格的操作也是一種常見的需求,比如刪除、修改和添加文字等。
// 刪除表格行 $("table").on("click", ".delete-btn", function() { $(this).closest("tr").remove(); }); // 修改表格中的文字 $("table").on("click", ".edit-btn", function() { var $td = $(this).closest("tr").find("td").eq(1); var oldText = $td.text(); var newText = window.prompt("請輸入新的文字", oldText); if (newText !== null && newText !== "") { $td.text(newText); } }); // 添加新的表格行 $("#add-btn").click(function() { var name = $("#name-input").val(); var age = $("#age-input").val(); var $tr = $("<tr><td>" + name + "</td><td>" + age + "</td><td><button class='edit-btn'>修改</button> <button class='delete-btn'>刪除</button></td></tr>"); $("table tbody").append($tr); });
上述代碼演示了如何使用jQuery來實現(xiàn)表格的刪除、修改和添加新的行的功能。其中,使用了on()方法來對動態(tài)添加的按鈕進行事件監(jiān)聽,closest()方法用來找到最近的父級元素,eq()方法用來獲取指定位置的子元素,在拼接HTML字符串時使用了模板字符串。
上一篇div n換行
下一篇jquery表格中的屬性