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


Posted in jQuery onFebruary 19, 2019

本文实例讲述了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:

$("#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程序设计有所帮助。

jQuery 相关文章推荐
jquery中each循环的简单回滚操作
May 05 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
Javascript的this用法
2017/01/16 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
python局部赋值的规则
2013/03/07 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
基于python的字节编译详解
2017/09/20 Python
聊聊Python中的pypy
2018/01/12 Python
Python中is和==的区别详解
2018/11/15 Python
python3实现多线程聊天室
2018/12/12 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
考研复习计划
2015/01/19 职场文书