Question

我需要在下面的节点通过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。我用简单的数字来解释代码。

更新

当用户单击重复按钮时。复制函数将被调用。现在，我可以更改表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);
  }

因为每个标签在用户单击时都具有其他功能。这是目前最好的方法。

提前谢谢

Answer 1

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

我的函数根据newid div中已经存在的表的数量来计算#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>

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

更新

1 个答案: