首页 > 编程 > JavaScript > 正文

jQuery中table数据的值拷贝和拆分

2019-11-19 17:07:04
字体:
来源:转载
供稿:网友

在开发的过程中,经常会遇到弹出框显示前一页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;    }

      以上通过拷贝来实现数据的拷贝并将数据拆分成想要的结果。希望对大家有所帮助,如果大家有任何疑问欢迎给留言,小编会及时回复大家的!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表