jQuery中table數(shù)據(jù)的值拷貝和拆分
更新時(shí)間：2017年03月19日 08:51:46 作者：liu_yujie2011com
在開(kāi)發(fā)的過(guò)程中，經(jīng)常會(huì)遇到彈出框顯示前一頁(yè)table列表的情況，這時(shí)候會(huì)有好多方法來(lái)來(lái)解決。下面小編給大家介紹怎么用jquery將值拷貝到第二頁(yè)并拆分拷貝的值，需要的朋友參考下
在開(kāi)發(fā)的過(guò)程中，經(jīng)常會(huì)遇到彈出框顯示前一頁(yè)table列表的情況，這時(shí)候會(huì)有好多方法來(lái)來(lái)解決，有的人可能會(huì)說(shuō)重新查一遍數(shù)據(jù)顯示，有的人會(huì)說(shuō)直接用js將值拷貝過(guò)去，然后再修改，不過(guò)現(xiàn)在就介紹怎么用jquery將值拷貝到第二頁(yè)并拆分拷貝的值。
母頁(yè)顯示數(shù)據(jù)格式如下：
<div class="materialCode stdtable">
<h2>發(fā)貨情況</h2>
<ul class="theadUl clearfix">
<li class="td1">發(fā)貨批次</li>
<li class="td2">商品</li>
<li class="td3">發(fā)貨數(shù)量</li>
<li class="td4">剩余數(shù)量</li>
<li class="td5">收貨數(shù)量</li>
<li class="td6">收貨狀態(tài)</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' }">
待發(fā)貨
</c:if>
<c:if test="${deliverGoodsList.deliveryStatus =='20' }">
待確認(rèn)收貨
</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="確認(rèn)收貨" 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">暫無(wú)發(fā)貨信息</td>
</tr>
</tbody>
</c:if>
</table>
</div>
</div>
如下是彈出框顯示頁(yè)：
<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>確認(rèn)收貨數(shù)量</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="關(guān)閉"></a>
</div>
</div>
<div class="content" style="height:96%;">
<div style="height:70%;overflow: auto;">
<table class="recieveCount">
<thead>
<tr>
<th class="td1 ">發(fā)貨批次</th>
<th class="td2 ">商品</th>
<th class="td3 ">發(fā)貨數(shù)量</th>
<th class="td4 ">剩余</th>
<th class="td5 ">收貨數(shù)量</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8" style="color:#FF9400;">請(qǐng)仔細(xì)核對(duì)收貨數(shù)量后確認(rèn)</td>
</tr>
<%--<input type="button" name="" value="確認(rèn)" 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;
}
以上通過(guò)拷貝來(lái)實(shí)現(xiàn)數(shù)據(jù)的拷貝并將數(shù)據(jù)拆分成想要的結(jié)果。希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
ToolTips JQEURY插件之簡(jiǎn)潔小提示框效果
本來(lái)不想寫(xiě)成ＪＱ的插件的，不過(guò)貌似不用ＪＱ的話，引用起來(lái)沒(méi)有這么方便。以前也寫(xiě)過(guò)一些小小的ＪＳ方法，但是寫(xiě)ＪＱ插件是第一次2011-11-11
JQuery優(yōu)缺點(diǎn)分析說(shuō)明
如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說(shuō)其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。2011-04-04
jquery學(xué)習(xí)筆記 用jquery實(shí)現(xiàn)無(wú)刷新登錄
為了防止以后好久不用生疏，在這里記下，供剛開(kāi)始學(xué)習(xí)jquery的童鞋們借鑒，我也是剛開(kāi)始學(xué)jquery，有什么寫(xiě)的不對(duì)的地方，還請(qǐng)大家指出錯(cuò)誤，共同進(jìn)步。2011-08-08
jQuery Mobile漏洞會(huì)有跨站腳本攻擊風(fēng)險(xiǎn)
人們經(jīng)常將跨站腳本攻擊(Cross Site Scripting)縮寫(xiě)為CSS，但這會(huì)與層疊樣式表(Cascading Style Sheets, CSS)的縮寫(xiě)混淆。因此有人將跨站腳本攻擊縮寫(xiě)為XSS。2017-02-02
下面小編就為大家?guī)?lái)一篇淺談jquery中使用canvas的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例
原生方法明顯要比jQuery方法快，因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情，如果你針對(duì)的是現(xiàn)代瀏覽器，那么使用原生方法會(huì)使性能有很大的提升2013-05-05
jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版)
jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版) 之前寫(xiě)的那篇中存在許多bug，今天重新整理了一下。還請(qǐng)各位指教2011-04-04
本節(jié)主要介紹了jQuery打印圖片pdf、txt,需要的朋友可以參考下2014-07-07
jquery分頁(yè)插件jpaginate在IE中不兼容問(wèn)題
這篇文章主要介紹了jquery分頁(yè)插件jpaginate不兼容ie的問(wèn)題,需要的朋友可以參考下2014-04-04