jQueryでのテーブルデータ値のコピーと分割について詳しく解説

開発中に、前のページのテーブルリストがポップアップボックスに表示される場合がよくあります。このとき、データの表示をもう一度確認してくださいという人もいるかもしれません。 js を使って直接値をコピーして変更するという人もいますが、ここでは jquery を使って値を 2 ページ目にコピーし、コピーした値を分割する方法を紹介します。

マスターページに表示されるデータ形式は以下の通りです:

 <p class="materialCode stdtable">
      <h2 id="发货情况">发货情况</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="/static/imghwm/default1.png"  data-src="${deliverGoodsDetaiList.goodsImage}"  class="lazy"   alt="jQueryでのテーブルデータ値のコピーと分割について詳しく解説" >
                  <p>
                    <c:if test="${orderDetail.orderForm.orderType ==&#39;2&#39; }">
                      <h5 id="a-nbsp-href-javascript-void-nbsp-rel-external-nbsp-nofollow-nbsp-deliverGoodsDetaiList-goodsName-a"><a href="javascript:void(0);" rel="external nofollow" >${deliverGoodsDetaiList.goodsName}</a></h5>
                    </c:if>
                    <c:if test="${orderDetail.orderForm.orderType !=&#39;2&#39; }">
                      <h5 id="a-nbsp-href-URL-WWW-shop-index-php-act-goods-goods-id-deliverGoodsDetaiList-goodsId-nbsp-rel-external-nbsp-nofollow-nbsp-deliverGoodsDetaiList-goodsName-a"><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="/static/imghwm/default1.png"  data-src="${URL_LIB}/static/order/images/sanjiao_orange.png"  class="lazy"   alt="jQueryでのテーブルデータ値のコピーと分割について詳しく解説" >
                      <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>

以下はポップアップボックス表示ページです:

<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 id="确认收货数量">确认收货数量</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コード表示です:

rreee

習いましたか？急いで試してみて、便利だと思ったら保存することもできます。

関連する推奨事項;

配列とオブジェクトの深いコピーと浅いコピーを実装する方法

jqueryでの深いコピーと浅いコピーの実装

JavaScriptの浅いコピーと深いコピーの違い

以上がjQueryでのテーブルデータ値のコピーと分割について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。