在開發的過程中，經常會遇到彈出框顯示前一頁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; }以上通過拷貝來實現數據的拷貝并將數據拆分成想要的結果。希望對大家有所幫助，如果大家有任何疑問歡迎給留言，小編會及時回復大家的！
新聞熱點
疑難解答
