jQuery实现为table表格动态添加或删除tr功能示例

本文实例讲述了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  });