本文實例講述了jQuery實現為table表格動態添加或刪除tr功能。分享給大家供大家參考，具體如下：
HTML頁面元素如下：
<!-- 訂單明細dialog --><div id="contractDetailDiv" title="銷售訂單明細" style="display:none;"> <table class="exhibit_table" id="contractDetailTab" border="1"> <tr> <td>訂單合同號</td> <td colspan="4" id="orderId"></td> </tr> <tr> <td>捆包號</td> <td>品名</td> <td>規格</td> <td>材質</td> <td>重量</td> </tr> </table></div>
業務需求是，從后臺獲取到訂單合同下的明細信息，然后動態添加到上面的表格中，做法是：
1. 在jqgrid表格中為每一列添加一個“訂單明細”的圖標，如下所示：
jQuery(function($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; jQuery(grid_selector).jqGrid({ data: grid_data, datatype: "local", //從服務器端返回的數據類型 height: 400, //表格高度，可以是數字，像素值或者百分比 /****列顯示名稱******/ colNames:['id', '訂單合同號', '收貨單位', '提貨方式', '物資來源', '物資來源廠商名稱', '訂單總重量', '綁定合同號來源', '綁定合同號', '訂單狀態', '訂單明細'], /****常用到的屬性：name 列顯示的名稱；index 傳到服務器端用來排序用的列名稱；width 列寬度；align 對齊方式；sortable 是否可以排序******/ colModel:[ {name:'id',index:'id', width:0, sorttype:"int", editable: true, hidden:true}, {name:'goodsOrder', index:'goodsOrder', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'goodsReceiveCompany', index:'goodsReceiveCompany', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'goodsDeliveryMode', index:'goodsDeliveryMode', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'originName', index:'originName', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'contractWeight', index:'contractWeight', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}, formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"", decimalPlaces:3}}, {name:'purchaseContractOrigin', index:'purchaseContractOrigin', width:60, sortable:false, editable: true, editoptions:{size:"20",maxlength:"30"}}, {name:'purchaseContractOriginVal', index:'purchaseContractOriginVal', width:60, sortable:false, editable: true, editoptions:{size:"20",maxlength:"30"}}, {name:'contractStatus', index:'contractStatus', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'myac222', index:'', width:120, fixed:true, sortable:false, resize:false, align:'center', formatter: function (value, grid, rows, state) { return "<a href=/"#/" title=/"訂單明細/" style=/"margin-left:10px/" onclick=/"contractDetail(" + rows.id + ")/"><i class=/"icon-bar-chart blue/" style=/"font-size:15px/"></i></a>"; } } ], loadonce: true, //一次加載全部數據到客戶端，由客戶端進行排序。 sortable: true, rownumbers: true, //添加左側行號 viewrecords: true, //定義是否要顯示總記錄數 rowNum: 10, //在grid上顯示記錄條數，這個參數是要被傳遞到后臺 rowList: [10,20,30], //一個下拉選擇框，用來改變顯示記錄數，當選擇時會覆蓋rowNum參數傳遞到后臺 pager: pager_selector, //定義翻頁用的導航欄，必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置 altRows: true, //設置為交替行表格,默認為false //toppager: true, multiselect: true, //定義是否可以多選 //multikey: "ctrlKey", //只有在multiselect設置為ture時起作用，定義使用那個key來做多選。shiftKey，altKey，ctrlKey multiboxonly: true, //只有當multiselect = true.起作用，當multiboxonly 為ture時只有選擇checkbox才會起作用 gridComplete:function(){ //在此事件中循環為每一行添加修改和刪除鏈接 }, loadComplete : function() { $(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' }); var table = this; setTimeout(function(){ updatePagerIcons(table); enableTooltips(table); }, 0); }, editurl: "???", //定義對form編輯時的url caption: "銷售訂單列表", //表格名稱 autowidth: true //如果為ture時，則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動調整則需要實現函數：setGridWidth });上面添加“訂單明細”的圖標時，為其綁定了onclick事件，此事件將傳遞每一行的id給綁定函數。
2. 在綁定函數中首先獲取onclick傳遞過來的行id，通過此行id可訪問該行的每個字段的數據。然后在此綁定函數中通過ajax從后臺獲取到“訂單明細”的具體數據，再通過append方法將獲取到的數據動態添加到table表格中。最后，將此table表格所在的div以dialog的形式彈出來展示給用戶。如下：
/*********合同明細彈出框************/function contractDetail(id){ $("#contractDetailTab tr:gt(0)").empty(); var rowData = $("#grid-table").jqGrid('getRowData',id); var purchaseContractOrder = rowData.purchaseContractOriginVal; $("#orderId").html(rowData.goodsOrder); //請求合同明細數據 $.ajax({ async:false, cache:true, type: "GET", url: "goods_findPagePurchaseOrderDetail.do?purchaseContractOrder="+purchaseContractOrder, //獲取json數據 success: function(result){ var result = eval('('+ result +')'); if(result.root != undefined && result.root.length > 0){ var resultContent = result.root; for (var i = 0; i < resultContent.length; i++) { $("#contractDetailTab").append("<tr><td>捆包號</td><td>品名</td><td>規格</td><td>材質</td><td>重量</td></tr><tr><td>"+resultContent[0][0]+"</td><td>"+resultContent[0][1]+"</td><td>"+resultContent[0][2]+"</td><td>"+resultContent[0][3]+"</td><td>"+resultContent[0][5]+"</td></tr>"); } $("#contractDetailDiv").dialog({ autoOpen:true, height:300, width:450, resizable:false, modal:true, }); } else { alert("該訂單合同下無明細信息！"); } }, error: function() { alert("獲取合同明細失敗") } });}這里需要注意的是，每次動態添加新的明細之前，需要將上一次的明細信息清空，即使用empty方法將上一次動態添加的tr先刪除掉，然后再動態添加新的明細信息。
動態刪除除第一行以外的其他tr：
$("#contractDetailTab tr:gt(0)").empty();$("#contractDetailTab tr").not(':eq(0)').empty();動態添加tr：
動態刪除除第一行和最后一行以外的其他tr：
$("#contractDetailTab tr:not(:first):not(:last)").remove();更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作xml技巧總結》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
