ホームページ > 記事 > ウェブフロントエンド > jQueryでのテーブルデータ値のコピーと分割について詳しく解説
jQueryでのテーブルデータ値のコピーと分割について詳しく解説
- 小云云オリジナル
- 2018-01-22 11:27:341284ブラウズ
開発中に、前のページのテーブルリストがポップアップボックスに表示される場合がよくあります。このとき、データの表示をもう一度確認してくださいという人もいるかもしれません。 js を使って直接値をコピーして変更するという人もいますが、ここでは jquery を使って値を 2 ページ目にコピーし、コピーした値を分割する方法を紹介します。
マスターページに表示されるデータ形式は以下の通りです:
<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コード表示です:
習いましたか？急いで試してみて、便利だと思ったら保存することもできます。
関連する推奨事項;
以上がjQueryでのテーブルデータ値のコピーと分割について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。