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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
php max_execution_time执行时间问题
2011/07/17 PHP
php不写闭合标签的好处
2014/03/04 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
js操作二进制数据方法
2018/03/03 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
pygame实现成语填空游戏
2019/10/29 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
python tkinter实现连连看游戏
2020/11/16 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
初一地理教学反思
2014/01/16 职场文书
酒店个人求职信范文
2014/01/25 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
化工见习报告范文
2014/10/31 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
神州牡丹园的导游词
2019/11/20 职场文书