jQuery是一個非常流行的JavaScript庫,它提供了很多方便的函數(shù)和方法來實現(xiàn)Web開發(fā)中的各種需求。其中,表格的操作是一個常見的需求,包括刪除、修改、添加等操作。在本文中,我們學習如何使用jQuery來實現(xiàn)表格的這些操作。
//刪除表格行 $("table tr").on("click", ".delete", function(){ $(this).parents("tr").remove(); }); //修改表格行 $("table tr").on("click", ".edit", function(){ var $row = $(this).parents("tr"); var id = $row.find("td:first-child").text(); var name = $row.find("td:nth-child(2)").text(); var age = $row.find("td:nth-child(3)").text(); $row.html("<td><input type='text' name='id' value='"+id+"' readonly></td><td><input type='text' name='name' value='"+name+"'></td><td><input type='text' name='age' value='"+age+"'></td><td><button class='save'>保存</button><button class='cancel'>取消</button></td>"); }); //添加表格行 $("form").submit(function(event){ event.preventDefault(); var name = $("input[name='name']").val(); var age = $("input[name='age']").val(); $("table tbody").append("<tr><td>"+(new Date().getTime())+"</td><td>"+name+"</td><td>"+age+"</td><td><button class='edit'>編輯</button><button class='delete'>刪除</button></td></tr>"); });
以上代碼實現(xiàn)了刪除、修改和添加表格行的功能。對于刪除和修改操作,我們使用了jQuery的on()方法來綁定事件,這樣就可以在動態(tài)生成的元素上綁定事件。在修改表格行的操作中,我們先獲取了要修改的行的各個字段的值,然后用一個元素來代替原來的