개발 과정에서 팝업창에 이전 페이지의 테이블 목록이 표시되는 경우가 종종 있는데, 이때 데이터 표시를 다시 확인하라고 하시는 분들도 계십니다. 어떤 사람들은 js를 사용하여 값을 직접 복사한 다음 수정하라고 합니다. 하지만 이제 jquery를 사용하여 두 번째 페이지에 값을 복사하고 복사된 값을 분할하는 방법을 소개하겠습니다.
마스터 페이지에 표시되는 데이터 형식은 다음과 같습니다.
<p 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>
<p class="ord_product"><img src="${deliverGoodsDetaiList.goodsImage}">
<p>
<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>
</p>
</p>
</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">查看备注
<p class="beizhu_msg beizhu_msg_li" style="display: none;">
<img src="${URL_LIB}/static/order/images/sanjiao_orange.png">
<p>${deliverGoodsList.logisticsRemark}</p>
</p>
</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>
</p>
</p>다음은 팝업 상자 표시 페이지입니다.
<p 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;">
<p class="title">
<h2>确认收货数量</h2>
<p>
<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>
</p>
</p>
<p class="content" style="height:96%;">
<p 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>
</p>
<p class="bot_btns" style="position: absolute;bottom: 30px;left:0;width:100%;">
<p class="ordSure_btn" style="width:100px; margin-left:30%; float:left; margin-top: 0;" onclick="comformDeliver()">确定</p>
<p class="ordCancel_btn" style="width:100px; margin-left:10%; float:left; margin-top: 0;">取消</p>
</p>
</p>
</p>
</p>다음은 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;
}배우셨나요? 서둘러서 사용해 보시고 유용하다고 생각하시면 저장해 두셔도 됩니다.
관련 권장 사항;
배열과 객체의 깊은 복사본과 얕은 복사본을 구현하는 방법
JavaScript의 얕은 복사본과 전체 복사본의 차이점
위 내용은 jQuery에서 테이블 데이터 값 복사 및 분할에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
