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