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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
原生js实现碰撞检测
Mar 12 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
用libtemplate实现静态网页生成
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
通用C#笔试题附答案
2016/11/26 面试题
总务岗位职责
2013/11/19 职场文书
葬礼司仪主持词
2014/03/31 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
群众路线对照检查材料
2014/09/22 职场文书
邀请书格式范文
2015/02/02 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS