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\" οnclick=\"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，ctrlKeymultiboxonly: 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编辑时的urlcaption: "销售订单列表",        //表格名称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：

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

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

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

jQuery为table表格动态添加或删除tr相关推荐

html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
table动态添加、删除tr
在Web网页中动态为table添加或删除数据行是很常见的需求,实现这一效果有很多种方法,这里只介绍一种,不过在写这一解决方法的时候我感受到了熟练使用Jquery的重要性. Html代码: <st ...
html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的 ...
php 动态添加表格行,jQuery给html表格动态添加行方法总结
这次给大家带来jQuery给html表格动态添加行方法总结,jQuery给html表格动态添加行的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了jQuery实现html表格动态添加新 ...
利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
JSP中动态添加或删除table的行
个想要实现如上图动态添加或者删除一行的功能,代码如下:(包含点击"环节参与人员"空白栏时弹出组织结构人员树时的弹窗功能) HTML部分: <body ><di ...

jQuery为table表格动态添加或删除tr

jQuery为table表格动态添加或删除tr相关推荐

最新文章

热门文章