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的获取标签名的代码
Jul 16 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JavaScript中的高级函数
Jan 04 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 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
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php cli配置文件问题分析
2015/10/15 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Django视图扩展类知识点详解
2019/10/25 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python中get和post有什么区别
2020/06/19 Python
python interpolate插值实例
2020/07/06 Python
python 实现图片批量压缩的示例
2020/12/18 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
某公司.Net方向面试题
2014/04/24 面试题
咖啡店创业计划书范文
2014/09/15 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
保护校园环境倡议书
2015/04/28 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
浅谈python中的多态
2021/06/15 Python