在开发的过程中，经常会遇到弹出框显示前一页table列表的情况，这时候会有好多方法来来解决。下面小编给大家介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值，需要的朋友参考下
在开发的过程中，经常会遇到弹出框显示前一页table列表的情况，这时候会有好多方法来来解决，有的人可能会说重新查一遍数据显示，有的人会说直接用js将值拷贝过去，然后再修改，不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值。
母页显示数据格式如下：
<div> <h2>发货情况</h2> <ul> <li>发货批次</li> <li>商品</li> <li>发货数量</li> <li>剩余数量</li> <li>收货数量</li> <li>收货状态</li> <li>操作</li> </ul> <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></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><img src="https://www.jb51.net/${deliverGoodsDetaiList.goodsImage}"> <div> <c:if test="${orderDetail.orderForm.orderType =='2' }"> <h5><a href="javascript:void(0);" >${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}" >${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:;">查看备注 <div> <img src="https://www.jb51.net/${URL_LIB}/static/order/images/sanjiao_orange.png"> <p>${deliverGoodsList.logisticsRemark}</p> </div> </a> <c:if test="${deliverGoodsList.deliveryStatus !='30' }"> <input type="button" value="确认收货" > </c:if> </td> </c:if> <%--<td>${deliverGoodsDetaiList.goodsId}</td>--%> </c:forEach> </tr> </c:forEach> </tbody> <c:if test="${empty orderDetail.deliverGoodsList}"> <tbody> <tr> <td colspan="7">暂无发货信息</td> </tr> </tbody> </c:if> </table> </div> </div>
如下是弹出框显示页：
<div> <div> <h2>确认收货数量</h2> <div> <a href="javascript:;" title="最小化"></a> <a href="javascript:;" title="最大化"></a> <a href="javascript:;" title="还原"></a> <a href="javascript:;" title="关闭"></a> </div> </div> <div> <div> <table> <thead> <tr> <th>发货批次</th> <th>商品</th> <th>发货数量</th> <th>剩余</th> <th>收货数量</th> </tr> </thead> <tbody> <tr> <td colspan="8">请仔细核对收货数量后确认</td> </tr> <%--<input type="button" value="确认">--%> <%--<input type="button" value="取消" >--%> </tbody> </table> </div> <div> <div>确定</div> <div>取消</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);' 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);' value='"+deliverNum+"'>" $($(this).find("td")[3]).empty(); $($(this).find("td")[3]).append(inputHTML); } }); $("#messageBoxWin table tbody").empty(); $("#messageBoxWin table tbody").append(delitems); deliverGoodsId=deliverId; }
以上通过拷贝来实现数据的拷贝并将数据拆分成想要的结果。希望对大家有所帮助，如果大家有任何疑问欢迎给留言，小编会及时回复大家的！
您可能感兴趣的文章: