JQuery是一款十分強大的JavaScript庫,它不僅可以操作DOM元素,還可以快速完成復雜任務,如表格的增、刪、改、查等操作。下面我們來介紹一下使用jQuery實現(xiàn)表格增刪改查的具體方法。
1. 增加一行
$(function(){ // 給按鈕添加click事件 $("#addBtn").click(function(){ // 獲取表格的tbody元素 var tbody = $("#myTable").find("tbody"); // 創(chuàng)建一個新行 var row = $("<tr></tr>"); // 創(chuàng)建單元格并添加到新行中 $("<td></td>").html("新數(shù)據(jù)1").appendTo(row); $("<td></td>").html("新數(shù)據(jù)2").appendTo(row); $("<td></td>").html("新數(shù)據(jù)3").appendTo(row); // 將新行添加到表格中 tbody.append(row); }); });
以上代碼使用了jQuery的操作DOM元素的方法,通過創(chuàng)建元素和添加元素到已有的元素中實現(xiàn)了表格的動態(tài)增加。
2. 刪除一行
$(function(){ // 給按鈕添加click事件 $("#delBtn").click(function(){ // 獲取表格的tbody元素 var tbody = $("#myTable").find("tbody"); // 獲取選中的行 var row = tbody.find("tr.selected"); // 從表格中刪除選中的行 row.remove(); }); });
以上代碼通過選中行的class屬性,獲取選中行并刪除,實現(xiàn)了表格的動態(tài)刪除操作。
3. 修改一行
$(function(){ // 給按鈕添加click事件 $("#updBtn").click(function(){ // 獲取表格的tbody元素 var tbody = $("#myTable").find("tbody"); // 獲取選中的行 var row = tbody.find("tr.selected"); // 獲取選中行的單元格 var tds = row.find("td"); // 修改第一列數(shù)據(jù) tds.eq(0).html("修改后的數(shù)據(jù)1"); // 修改第二列數(shù)據(jù) tds.eq(1).html("修改后的數(shù)據(jù)2"); // 修改第三列數(shù)據(jù) tds.eq(2).html("修改后的數(shù)據(jù)3"); }); });
以上代碼也通過選中行的class屬性,獲取選中行并修改選中行的數(shù)據(jù),實現(xiàn)了表格的動態(tài)修改操作。
4. 搜索數(shù)據(jù)
$(function(){ // 給按鈕添加click事件 $("#searchBtn").click(function(){ // 獲取表格的tbody元素 var tbody = $("#myTable").find("tbody"); // 獲取搜索框的值 var keyword = $("#keyword").val(); var flag = false; // 遍歷表格中的數(shù)據(jù) tbody.find("tr").each(function(){ var tds = $(this).find("td"); if(tds.eq(0).html().indexOf(keyword) != -1 || tds.eq(1).html().indexOf(keyword) != -1 || tds.eq(2).html().indexOf(keyword) != -1){ $(this).show(); flag = true; }else{ $(this).hide(); } }); if(!flag){ alert("無匹配數(shù)據(jù)!"); } }); });
以上代碼通過獲取搜索框的值,在表格中進行數(shù)據(jù)匹配,并根據(jù)匹配結果隱藏或者顯示行,實現(xiàn)了表格動態(tài)搜索操作。
至此,使用jQuery實現(xiàn)表格的增刪改查操作介紹完畢,以上代碼都是基本代碼框架,具體使用時需要根據(jù)實際需求進行修改和完善。