本文實(shí)例講述了jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能。分享給大家供大家參考，具體如下：

HTML頁面元素如下：

<!-- 訂單明細(xì)dialog --><div id="contractDetailDiv" title="銷售訂單明細(xì)" style="display:none;">  <table class="exhibit_table" id="contractDetailTab" border="1">    <tr>      <td>訂單合同號(hào)</td>      <td colspan="4" id="orderId"></td>    </tr>    <tr>      <td>捆包號(hào)</td>      <td>品名</td>      <td>規(guī)格</td>      <td>材質(zhì)</td>      <td>重量</td>    </tr>  </table></div>

業(yè)務(wù)需求是，從后臺(tái)獲取到訂單合同下的明細(xì)信息，然后動(dòng)態(tài)添加到上面的表格中，做法是：

1. 在jqgrid表格中為每一列添加一個(gè)“訂單明細(xì)”的圖標(biāo)，如下所示：

jQuery(function($) {  var grid_selector = "#grid-table";  var pager_selector = "#grid-pager";  jQuery(grid_selector).jqGrid({    data: grid_data,    datatype: "local",      //從服務(wù)器端返回的數(shù)據(jù)類型    height: 400,        //表格高度，可以是數(shù)字，像素值或者百分比    /****列顯示名稱******/    colNames:['id', '訂單合同號(hào)', '收貨單位', '提貨方式', '物資來源', '物資來源廠商名稱', '訂單總重量', '綁定合同號(hào)來源', '綁定合同號(hào)', '訂單狀態(tài)', '訂單明細(xì)'],    /****常用到的屬性：name 列顯示的名稱；index 傳到服務(wù)器端用來排序用的列名稱；width 列寬度；align 對(duì)齊方式；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=/"訂單明細(xì)/" style=/"margin-left:10px/" onclick=/"contractDetail(" + rows.id + ")/"><i class=/"icon-bar-chart blue/" style=/"font-size:15px/"></i></a>";        }      }    ],    loadonce: true, //一次加載全部數(shù)據(jù)到客戶端，由客戶端進(jìn)行排序。       sortable: true,    rownumbers: true,    //添加左側(cè)行號(hào)    viewrecords: true,    //定義是否要顯示總記錄數(shù)    rowNum: 10,        //在grid上顯示記錄條數(shù)，這個(gè)參數(shù)是要被傳遞到后臺(tái)    rowList: [10,20,30],    //一個(gè)下拉選擇框，用來改變顯示記錄數(shù)，當(dāng)選擇時(shí)會(huì)覆蓋rowNum參數(shù)傳遞到后臺(tái)    pager: pager_selector,  //定義翻頁用的導(dǎo)航欄，必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置    altRows: true,      //設(shè)置為交替行表格,默認(rèn)為false    //toppager: true,    multiselect: true,      //定義是否可以多選    //multikey: "ctrlKey",    //只有在multiselect設(shè)置為ture時(shí)起作用，定義使用那個(gè)key來做多選。shiftKey，altKey，ctrlKey    multiboxonly: true,      //只有當(dāng)multiselect = true.起作用，當(dāng)multiboxonly 為ture時(shí)只有選擇checkbox才會(huì)起作用    gridComplete:function(){ //在此事件中循環(huán)為每一行添加修改和刪除鏈接    },    loadComplete : function() {      $(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });      var table = this;      setTimeout(function(){        updatePagerIcons(table);        enableTooltips(table);      }, 0);    },    editurl: "???",  //定義對(duì)form編輯時(shí)的url    caption: "銷售訂單列表",    //表格名稱    autowidth: true        //如果為ture時(shí)，則當(dāng)表格在首次被創(chuàng)建時(shí)會(huì)根據(jù)父元素比例重新調(diào)整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動(dòng)調(diào)整則需要實(shí)現(xiàn)函數(shù)：setGridWidth  });