溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“jQuery中table數據值的拷貝和拆分”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在開發的過程中，經常會遇到彈出框顯示前一頁table列表的情況，這時候會有好多方法來來解決，有的人可能會說重新查一遍數據顯示，有的人會說直接用js將值拷貝過去，然后再修改，不過現在就介紹怎么用jquery將值拷貝到第二頁并拆分拷貝的值。
母頁顯示數據格式如下：
<div class="materialCode stdtable">
<h3>發貨情況</h3>
<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' }">
<h6><a href="javascript:void(0);" rel="external nofollow" >${deliverGoodsDetaiList.goodsName}</a></h6>
</c:if>
<c:if test="${orderDetail.orderForm.orderType !='2' }">
<h6><a href="${URL_WWW}/shop/index.php?act=goods&goods_id=${deliverGoodsDetaiList.goodsId}" rel="external nofollow" >${deliverGoodsDetaiList.goodsName}</a></h6>
</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" >
<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" >
<div class="title">
<h3>確認收貨數量</h3>
<div>
<a class="min" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="最小化" ></a>
<a class="max" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="最大化" ></a>
<a class="revert" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="還原" ></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" >
<div >
<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" >請仔細核對收貨數量后確認</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" >
<div class="ordSure_btn" onclick="comformDeliver()">確定</div>
<div class="ordCancel_btn" >取消</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;
}“jQuery中table數據值的拷貝和拆分”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
