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

2023-08-28 20:09:04 137

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

HTML页面元素如下：





订单合同号



捆包号
品名
规格
材质
重量

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

1.在jqgrid表格中为每一列添加一个“订单明细”的图标，如下所示：

jQuery(function($){
vargrid_selector="#grid-table";
varpager_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'});
vartable=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的形式弹出来展示给用户。如下：

/*********合同明细弹出框************/
functioncontractDetail(id){
$("#contractDetailTabtr:gt(0)").empty();
varrowData=$("#grid-table").jqGrid('getRowData',id);
varpurchaseContractOrder=rowData.purchaseContractOriginVal;
$("#orderId").html(rowData.goodsOrder);
//请求合同明细数据
$.ajax({
async:false,
cache:true,
type:"GET",
url:"goods_findPagePurchaseOrderDetail.do?purchaseContractOrder="+purchaseContractOrder,//获取json数据
success:function(result){
varresult=eval('('+result+')');
if(result.root!=undefined&&result.root.length>0){
varresultContent=result.root;
for(vari=0;i捆包号品名规格材质重量"+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：

$("#contractDetailTabtr:gt(0)").empty();
$("#contractDetailTabtr").not(':eq(0)').empty();

动态添加tr：

$("#contractDetailTab").append("捆包号品名规格材质重量"+resultContent[0][0]+""+resultContent[0][1]+""+resultContent[0][2]+""+resultContent[0][3]+""+resultContent[0][5]+"");

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

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQueryform操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

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

热门推荐

随机推荐