jQuery中table数据的值拷贝和拆分
程序员文章站
2024-01-20 13:10:22
在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,...
在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值。
母页显示数据格式如下:
<div 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> <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' }"> 待发货 </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" 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="确认收货" 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" 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>确认收货数量</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="关闭"></a> </div> </div> <div class="content" style="height:96%;"> <div 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> </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; }
以上通过拷贝来实现数据的拷贝并将数据拆分成想要的结果。希望对大家有所帮助
推荐阅读
-
mysql-Mysql中如何获取一条数据中所有字段的名称和值
-
查看数据库中的字段所在的表中或某值所在的表和字段
-
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
-
js与jQuery实现获取table中的数据并拼成json字符串操作示例
-
JQuery实现双击改变table中的值(代码实现教程)
-
jquery遍历table中每个td的值
-
insert和select结合实现"插入某字段在数据库中的最大值+1"的方法
-
JQuery怎么操作能找到table表格中input的值?
-
SQLSERVER查询整个数据库中某个特定值所在的表和字段的方法
-
JS和jQuery通过this获取html标签中的属性值(实例代码)