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


Posted in Javascript onMarch 19, 2017

在开发的过程中,经常会遇到弹出框显示前一页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" style="display: none;">
                      <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" style="display:none;z-index: 1000; width: 900px; height:500px;left: 50%; position: fixed; top:30%;margin-left:-450px;margin-top:-125px;padding-bottom:20px;">
    <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="最小化" style="display:none;"></a>
        <a class="max" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="最大化" style="display:none;"></a>
        <a class="revert" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="还原" style="display:none;"></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" style="height:96%;">
      <div style="height:70%;overflow: auto;">
        <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" style="color:#FF9400;">请仔细核对收货数量后确认</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" style="position: absolute;bottom: 30px;left:0;width:100%;">
        <div class="ordSure_btn" style="width:100px; margin-left:30%; float:left; margin-top: 0;" onclick="comformDeliver()">确定</div>
        <div class="ordCancel_btn" style="width:100px; margin-left:10%; float:left; margin-top: 0;">取消</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;
    }

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

Javascript 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
js date 格式化
Feb 15 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
js实现旋转木马效果
Mar 17 #Javascript
jQuery实现验证码功能
Mar 17 #Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 #Javascript
node操作mysql数据库实例详解
Mar 17 #Javascript
vue.js从安装到搭建过程详解
Mar 17 #Javascript
超简单的Vue.js环境搭建教程
Mar 17 #Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
You might like
重置版战役片段
2020/04/09 魔兽争霸
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python创建文件备份的脚本
2018/09/11 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
利用python生成照片墙的示例代码
2020/04/09 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Keras实现DenseNet结构操作
2020/07/06 Python
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
租车协议书
2015/01/27 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers