jQuery是一種快速、簡潔的JavaScript庫,它為頁面開發提供了很多便利的工具和方法。在處理表格數據時,采用jQuery可以輕松實現增刪改查的功能,下面我們來看一下具體操作。
//增加數據 $("#addBtn").click(function(){ var str = "<tr><td>"+$("#name").val()+"</td><td>"+$("#age").val()+"</td><td>"+$("#phone").val()+"</td></tr>"; $("#dataTable").append(str); }) //刪除數據 $("#deleteBtn").click(function(){ $("input[name='checkbox']").each(function(){ if($(this).is(":checked")){ $(this).parents("tr").remove(); } }) }) //修改數據 $("#editBtn").click(function(){ $("input[name='checkbox']").each(function(){ if($(this).is(":checked")){ var tdArr = $(this).parents("tr").children(); $("#editName").val(tdArr.eq(0).text()); $("#editAge").val(tdArr.eq(1).text()); $("#editPhone").val(tdArr.eq(2).text()); $("#editModal").modal(); } }) }) $("#editSubmitBtn").click(function(){ var tdArr = $("input[name='checkbox']:checked").parents("tr").children(); tdArr.eq(0).text($("#editName").val()); tdArr.eq(1).text($("#editAge").val()); tdArr.eq(2).text($("#editPhone").val()); $("#editModal").modal('hide'); }) //查詢數據 $("#searchBtn").click(function(){ var key = $("#searchInput").val(); $("table tr:not(:first)").hide(); $("table tr:contains('"+key+"')").show(); })
我們通過以上代碼可以看出,jQuery處理表格數據十分簡潔明了,通過操作數據的DOM元素和各種選擇器,無需編寫繁瑣冗長的代碼即可實現表格的增刪改查功能,使表格的操作更加輕松便捷。
上一篇div flex居中
下一篇div field 隱藏