当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery中table数据的值拷贝和拆分

jQuery中table数据的值拷贝和拆分知识点总结

  • 发布时间:
  • 作者:码农之家
  • 点击:148

这篇文章主要知识点是关于jQuery、table、拷贝和拆分、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery UI开发指南
  • 类型:前端开发大小:6.02 MB格式:PDF作者:Eric Sarrion
立即下载

Tags:jQuery table 拷贝和拆分 

jQuery中table数据的值拷贝和拆分

在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值。

       母页显示数据格式如下:

 <div class="materialCode stdtable">
      <h2>发货情况</h2>
      <ul class="theadUl clearfix">
        <li class="td1">发货批次</li>
        <li class="td2">商品</li>
        <li class="td3">发货数量</li>
        <li class="td4">剩余数量</li>
        <li class="td5">收货数量</li>
        <li class="td6">收货状态</li>
        <li class="td7">操作</li>
      </ul>
      <table id="table1">
        <thead>
          <tr>
            <th class="td1"></th>
            <th class="td2"></th>
            <th class="td3"></th>
            <th class="td4"></th>
            <th class="td5"></th>
            <th class="td6"></th>
            <th class="td7"></th>
          </tr>
        </thead>
        <tbody>
        <c:forEach var="deliverGoodsList"
           items="${orderDetail.deliverGoodsList}" varStatus="outer">
          <c:forEach var="deliverGoodsDetaiList"
                items="${deliverGoodsList.deliverGoodsDetaiList}" varStatus="inner">
          <tr flag="${deliverGoodsList.deliverGoodsId}" orderId="${deliverGoodsList.orderId}" goodsId="${deliverGoodsDetaiList.goodsId}">
            <c:if test="${inner.index == 0}">
              <td rowspan="${deliverGoodsList.deliverGoodsDetaiList.size()}">${outer.index+1}</td>
            </c:if>
              <td>
                <div class="ord_product"><img src="${deliverGoodsDetaiList.goodsImage}">
                  <div>
                    <c:if test="${orderDetail.orderForm.orderType =='2' }">
                      <h5><a href="javascript:void(0);" rel="external nofollow" >${deliverGoodsDetaiList.goodsName}</a></h5>
                    </c:if>
                    <c:if test="${orderDetail.orderForm.orderType !='2' }">
                      <h5><a href="${URL_WWW}/shop/index.php?act=goods&goods_id=${deliverGoodsDetaiList.goodsId}" rel="external nofollow" >${deliverGoodsDetaiList.goodsName}</a></h5>
                    </c:if>
                  </div>
                </div>
              </td>
              <td>${deliverGoodsDetaiList.deliveryNum}</td>
              <td>${deliverGoodsDetaiList.overplusNum}</td>
              <td>${deliverGoodsDetaiList.takeDeliveryNum}</td>
              <c:if test="${inner.index == 0}">
                <td rowspan="${deliverGoodsList.deliverGoodsDetaiList.size()}">
                <c:if test="${deliverGoodsList.deliveryStatus =='10' }">
                  待发货
                </c:if>
                <c:if test="${deliverGoodsList.deliveryStatus =='20' }">
                  待确认收货
                </c:if>
                <c:if test="${deliverGoodsList.deliveryStatus =='30' }">
                  已收货
                </c:if>
                <c:if test="${deliverGoodsList.deliveryStatus =='40' }">
                  退货
                </c:if>
                </td>
              </c:if>
            <c:if test="${inner.index == 0}">
              <td rowspan="${deliverGoodsList.deliverGoodsDetaiList.size()}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pr beizhu">查看备注
               <div class="beizhu_msg beizhu_msg_li" >
                      <img src="${URL_LIB}/static/order/images/sanjiao_orange.png">
                      <p>${deliverGoodsList.logisticsRemark}</p>
               </div>
              </a>
                <c:if test="${deliverGoodsList.deliveryStatus !='30' }">
                 <input type="button" name="" value="确认收货" class="dayin" onclick="showDeliver(${deliverGoodsList.deliverGoodsId})" >
                </c:if>
              </td>
            </c:if>
            <%--<td>${deliverGoodsDetaiList.goodsId}</td>--%>
            </c:forEach>
          </tr>
        </c:forEach>
        </tbody>
        <c:if test="${empty orderDetail.deliverGoodsList}">
            <tbody>
            <tr class="opt_zanwu">
              <td colspan="7">暂无发货信息</td>
            </tr>
            </tbody>
        </c:if>
      </table>
    </div>
    </div>

如下是弹出框显示页:

<div id="messageBoxWin" class="popup" >
    <div class="title">
      <h2>确认收货数量</h2>
      <div>
        <a class="min" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="最小化" ></a>
        <a class="max" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="最大化" ></a>
        <a class="revert" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="还原" ></a>
        <a class="close" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="关闭"></a>
      </div>
    </div>
    <div class="content" >
      <div >
        <table class="recieveCount">
          <thead>
          <tr>
            <th class="td1 ">发货批次</th>
            <th class="td2 ">商品</th>
            <th class="td3 ">发货数量</th>
            <th class="td4 ">剩余</th>
            <th class="td5 ">收货数量</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td colspan="8" >请仔细核对收货数量后确认</td>
          </tr>
          <%--<input type="button" name="" value="确认" class="ordSure_btn" onclick="comformDeliver(${deliverGoodsList.orderId},${deliverGoodsList.deliverGoodsId})">--%>
          <%--<input type="button" name="" value="取消" class="ordSure_btn" >--%>
          </tbody>
        </table>
      </div>
      <div class="bot_btns" >
        <div class="ordSure_btn"  onclick="comformDeliver()">确定</div>
        <div class="ordCancel_btn" >取消</div>
      </div>
    </div>
  </div>
  </div>

如下为jquery代码显示:

 function showDeliver(deliverId){
      var delitems= $("#table1 tr[flag='"+deliverId+"']").clone();
      $(delitems).each(function(index){
        if(index==0){
          $($(this).find("td")[6]).remove();
          $($(this).find("td")[5]).remove();
          var deliverNum = $($(this).find("td")[2]).text(); 
          var inputHTML="<input type='text' onblur='checkAcount(this);' class='sum' value='"+deliverNum+"'>"
          $($(this).find("td")[4]).empty();
          $($(this).find("td")[4]).append(inputHTML);
        }else{
          var deliverNum= $($(this).find("td")[1]).text();
          var inputHTML="<input type='text' onblur='checkAcount(this);' class='sum' value='"+deliverNum+"'>"
          $($(this).find("td")[3]).empty();
          $($(this).find("td")[3]).append(inputHTML);
        }
      });
      $("#messageBoxWin table tbody").empty();
      $("#messageBoxWin table tbody").append(delitems);
      deliverGoodsId=deliverId;
    }

      以上通过拷贝来实现数据的拷贝并将数据拆分成想要的结果。希望对大家有所帮助,如果大家有任何疑问欢迎给留言,小编会及时回复大家的!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.728714

jQuery表格(Table)基本操作实例分析

本文实例讲述了jQuery表格(Table)基本操作。分享给大家供大家参考,具体如下: Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结。 首先建立一个通用的表格css 和一个 表格Table: table{ border-collapse: collapse; border-spacing: 0; margin-right: auto; margin-left: auto; width: 800px; } th, td { border: 1px solid #b5d6e6; font-size: 12px; font-weight: normal; text-align: center; vertical-align: middle; height: 20px; } th { background-color: Gray; } table tr th 表头一/th th 表头二 /th th 表头三/th th 表头四/th th 表头五/th /tr tr td第一行第一列/td td第一行第二列/td td第一行第三列/td td第一行第四列/td td第一行第五列/td /tr tr td第二行第一列/td td第二行第二列/td td第二行第三列/td td第二行第四列/td td第二行第五列/td /tr tr td第三行第一列/td td第三行第二列/td td第三行第三列/td td第三行第四列/td td第三行第……

网友NO.478814

jQuery实现table表格checkbox全选的方法分析

本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题,在列标题中的单选框为全选框; 设置表格题,表格题的单选框就是普通的单选框啦: table thead tr td input type="checkbox" onclick="selectAll(this.checked)" / /td /tr /thead tbody tr td input type="checkbox" name="check" / /td td input type="checkbox" name="check" / /td td input type="checkbox" name="check" / /td /tr /tbody /table 第二步 通过jQuery实现当点击全选框的时候所有单选框都选中,当再次点击全选框的时候所有单选框都是未选中状态: function selectAll(selectStatus){//传入参数(全选框的选中状态) //根据name属性获取到单选框的input,使用each方法循环设置所有单选框的选中状态 if(selectStat……

网友NO.128528

jQuery对table表格进行增删改查

最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode。 1.首先我自己写了一个简单的div布局。 2.实现几个用a标签做的按钮的功能 分别是新增 修改 删除 查询和返回。 代码如下 html+css(原谅我写在一起吧。。毕竟渲染不是我的强项) html headtitle测试数据/title/head style type="text/css" table, td{ font:100% '微软雅黑'; } table{width:80%;border-collapse:collapse; margin:0 0 0 100px} th, td{text-align:center;border:1px solid #fff;} th{background:#328aa4} td{background:#e5f1f4;} /style script type="text/javascript" src="jquery-1.8.0.js"/script script type="text/javascript" src="jq.js"/script body a href="#" style ="margin:100px" id="add_btn"新增/a input id="Ktext" type="text" a href="#" id="search_btn" 查询/a a href="#" style ="margin:100px" id="back_btn"返回/a br/ table id="tb" tr id="trr……

网友NO.825290

jquery删除table当前行的实例代码

jQuery删除当前行,只需传this,即可: /preptrtdinput type='hidden' name='annex' value="+rs+"a href='javascript:void(0);' onclick=\"download('"+rs+"')\""+rs+"/aspan onclick='deleteTr(this);' style='cursor:pointer'删除/span/td/tr/ppre code_snippet_id="1684775" snippet_file_name="blog_20160516_7_63040" name="code" class="html" //删除当前行 function deleteTr(nowTr){ //多一个parent就代表向前一个标签, // 本删除范围为tdtr两个标签,即向前两个parent //如果多一个parent就会删除整个table $(nowTr).parent().parent().remove(); } 以上就是小编为大家带来的jquery删除table当前行的实例代码全部内容了,希望大家多多支持码农之家~ ……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757