本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考，具体如下：

HTML页面元素如下：

业务需求是，从后台获取到订单合同下的明细信息，然后动态添加到上面的表格中，做法是：

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 "";

}

}

],

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("

捆包号品名规格材质重量"+resultContent[0][0]+""+resultContent[0][1]+""+resultContent[0][2]+""+resultContent[0][3]+""+resultContent[0][5]+"");

}

$("#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：

$("#contractDetailTab").append("

捆包号品名规格材质重量"+resultContent[0][0]+""+resultContent[0][1]+""+resultContent[0][2]+""+resultContent[0][3]+""+resultContent[0][5]+"");

动态删除除第一行和最后一行以外的其他tr：

$("#contractDetailTab tr:not(:first):not(:last)").remove();

希望本文所述对大家jQuery程序设计有所帮助。