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 相关文章推荐
JQuery获取表格数据示例代码
May 26 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
javascript实现放大镜功能
Dec 09 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
可插入图片的TEXT文本框
2013/12/27 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python实现飞机大战
2018/09/11 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
村委会贫困证明
2014/01/14 职场文书
法制宣传日活动总结
2014/04/29 职场文书
优秀团员自我评价
2015/03/10 职场文书
涨价通知
2015/04/23 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
java基础——多线程
2021/07/03 Java/Android
css3应用示例:新增的选择器
2022/03/16 HTML / CSS