jQuery表格增刪改查是常見的Web開發(fā)任務(wù)之一。通過使用jQuery插件,您可以輕松地創(chuàng)建和管理表格。下面,我們將介紹一些基本的jQuery表格增刪改查源碼。
$(document).ready(function(){ //Add a Row $("#add").click(function(){ var newRow = $("<tr>"); var cols = ""; cols += '<td><input type="text" name="name"/></td>'; cols += '<td><input type="text" name="age"/></td>'; cols += '<td><input type="text" name="gender"/></td>'; cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>'; newRow.append(cols); $("table.order-list").append(newRow); }); $("table.order-list").on("click", ".ibtnDel", function (event) { $(this).closest("tr").remove(); }); //Save button $("#save").click(function(){ var tableData = new Array(); $("table.order-list tbody tr").each(function(row,tr){ var subArray = {}; $(tr).find('input[name="name"]').each(function(index,input){ subArray["name"] = $(input).val(); }); $(tr).find('input[name="age"]').each(function(index,input){ subArray["age"] = $(input).val(); }); $(tr).find('input[name="gender"]').each(function(index,input){ subArray["gender"] = $(input).val(); }); tableData.push(subArray); }); //send tableData to server $.ajax({ type:'POST', url:'putData.php', data:{tableData:tableData}, success:function(msg){ alert(msg); } }); }); //Edit button $("table.order-list").on("click", ".ibtnEdit", function (event) { $(this).closest("tr").find("input").each(function() { $(this).removeAttr("disabled"); }); $(this).closest("tr").find(".btnSave").show(); $(this).hide(); event.preventDefault(); }); //Save button in Edit mode $("table.order-list").on("click", ".btnSave", function (event) { $(this).closest("tr").find("input").each(function() { $(this).attr("disabled", "disabled"); }); $(this).closest("tr").find(".ibtnEdit").show(); $(this).hide(); event.preventDefault(); }); });
上述jQuery源碼為一個(gè)基本的表格增、刪、改、查操作。其中,新增行的代碼通過點(diǎn)擊按鈕來創(chuàng)建一個(gè)包含文本和按鈕的行。刪除行的代碼則是在每行后面添加一個(gè)按鈕,并在點(diǎn)擊該按鈕時(shí)刪除行。保存按鈕的代碼通過遍歷所有行,并將表格數(shù)據(jù)存儲(chǔ)到數(shù)組中,然后通過ajax方法將數(shù)據(jù)發(fā)送到服務(wù)器進(jìn)行處理。編輯按鈕的代碼使用戶可以編輯已有的行,在編輯模式下按下保存按鈕即可修改并保存行。