时间戳

首页 > 解决方案 > 用javascript克隆节点后替换所有标签的ID

javascript - 用javascript克隆节点后替换所有标签的ID

问题描述

我需要通过 javascript 或 jquery 克隆下面的节点后更改所有 ID。

<table id="1">
 <tr>
  <td id="RM_1"><button type="button" onclick="duplicateFunction(1)"></td>
  <td id="CL_1"><input id="[1][999]"/></td>
 </tr>
</table>

当我克隆 ID = "1" 的节点时，我需要将 1 更改为 2，如下面的所有 ID 标签所示。

<table id="2">
 <tr>
  <td id="RM_2"><button type="button" onclick="duplicateFunction(2)"></td>
  <td id="CL_2"><input id="[2][999]"/></td>
 </tr>
</table>

备注：表 id 是唯一的 id。我用简单的数字来解释代码。

更新

当用户单击重复按钮时。将调用 duplicateFunction。现在，我可以更改表ID，但不能更改内部。

  function duplicateFunction(table_id){
    var myTable = document.getElementById(table_id);
    myClone = myTable.cloneNode(true);
    var newTableID = Date.now();
    myClone.id = newTableID;
    document.getElementById("AddingSpace").appendChild(myClone);
  }

因为当用户点击时，每个标签都有另一个功能要做。这是这个时候最好的办法。

先感谢您

标签： javascripthtmljquery

解决方案

这是按照 Rory McCrossan 建议的路线进行的尝试。我使用了缩短的类名，而不是表中元素的各个 id。这些表没有实际的 ID，而是dataset具有属性的id属性。这样，如果 id 变成双倍，就不会造成严重的问题......

我的函数根据divnewid中已有表的数量计算 a。#addingspace这也不是生产就绪的，但可能比你原来的方法问题少。

const $trg=$('#addingspace');
$(document).on('click','.RM button',function(){
  let newid=$trg.find('table').length+2;
  $trg.append(
    $(this).closest('table').clone().data('id',newid) // set data-id 
           .find('.CL span').text(newid).end()        // set span and return cloned element
  )
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-id="1">
 <tr>
  <td class="RM"><button type="button">duplicate</button></td>
  <td class="CL"><input /> id: <span>1</span></td>
 </tr>
</table>
<div id="addingspace"></div>

推荐阅读