蝙蝠岛资源网 Design By www.hbtsch.com

本文实例讲述了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, //获取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表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

标签:
jQuery,table表格,动态添加,删除,tr

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无jQuery实现为table表格动态添加或删除tr功能示例的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?