欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-20 13:10:22
在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,...

在开发的过程中,经常会遇到弹出框显示前一页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;
    }

      以上通过拷贝来实现数据的拷贝并将数据拆分成想要的结果。希望对大家有所帮助