Detaillierte Erläuterung des Kopierens und Aufteilens von Tabellendatenwerten in jQuery

Während des Entwicklungsprozesses kommt es häufig vor, dass ein Popup-Fenster die Tabellenliste auf der vorherigen Seite anzeigt. Zu diesem Zeitpunkt gibt es möglicherweise viele Möglichkeiten, das Problem zu lösen , und einige Leute werden es tun Es wird gesagt, dass Sie js direkt verwenden können, um den Wert zu kopieren und ihn dann zu ändern, aber jetzt werde ich vorstellen, wie man jquery verwendet, um den Wert auf die zweite Seite zu kopieren und den kopierten Wert aufzuteilen.

Das Format der Masterseiten-Anzeigedaten lautet wie folgt:

 <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 ==&#39;2&#39; }">
                      <h5><a href="javascript:void(0);" rel="external nofollow" >${deliverGoodsDetaiList.goodsName}</a></h5>
                    </c:if>
                    <c:if test="${orderDetail.orderForm.orderType !=&#39;2&#39; }">
                      <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 ==&#39;10&#39; }">
                  待发货
                </c:if>
                <c:if test="${deliverGoodsList.deliveryStatus ==&#39;20&#39; }">
                  待确认收货
                </c:if>
                <c:if test="${deliverGoodsList.deliveryStatus ==&#39;30&#39; }">
                  已收货
                </c:if>
                <c:if test="${deliverGoodsList.deliveryStatus ==&#39;40&#39; }">
                  退货
                </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 !=&#39;30&#39; }">
                 <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>

Das Folgende ist die Popup-Box-Anzeigeseite:

<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>

Der JQuery-Code wird unten angezeigt:

 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=&#39;text&#39; onblur=&#39;checkAcount(this);&#39; class=&#39;sum&#39; value=&#39;"+deliverNum+"&#39;>"
          $($(this).find("td")[4]).empty();
          $($(this).find("td")[4]).append(inputHTML);
        }else{
          var deliverNum= $($(this).find("td")[1]).text();
          var inputHTML="<input type=&#39;text&#39; onblur=&#39;checkAcount(this);&#39; class=&#39;sum&#39; value=&#39;"+deliverNum+"&#39;>"
          $($(this).find("td")[3]).empty();
          $($(this).find("td")[3]).append(inputHTML);
        }
      });
      $("#messageBoxWin table tbody").empty();
      $("#messageBoxWin table tbody").append(delitems);
      deliverGoodsId=deliverId;
    }

Haben Sie es gelernt? Beeilen Sie sich und probieren Sie es aus. Wenn Sie es nützlich finden, können Sie es auch speichern.

Verwandte Empfehlungen;

Wie man tiefe und flache Kopien von Arrays und Objekten implementiert

Deep Copy und flache Kopie in JQuery implementieren

Der Unterschied zwischen JavaScript Shallow Copy und Deep Copy

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Kopierens und Aufteilens von Tabellendatenwerten in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!