Jquery中table数据的值拷贝及拆分

     

       在开发的过程中，经常会遇到弹出框显示前一页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);">${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}">${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:;" 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" οnclick="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:;" title="最小化" style="display:none;"></a>
                <a class="max" href="javascript:;" title="最大化" style="display:none;"></a>
                <a class="revert" href="javascript:;" title="还原" style="display:none;"></a>
                <a class="close" href="javascript:;" 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" οnclick="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;" οnclick="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' οnblur='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' οnblur='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;
        }

      以上通过拷贝来实现数据的拷贝并将数据拆分成想要的结果。