本文实例讲述了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程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
Android 入门第七讲01-数据存储（数据存储概述，文件存储（raw和asserts目录读写，data/data/包名目录读写，sdcard目录读写），SharedPreferences读写）
vue-axios系列:axios拦截器，配置请求头，配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论