javascript - js 如何使用自己的新 id 更改克隆表单内的 id

Question

我有一个名为 duplicator1 的部分。我想克隆该部分并且它可以工作，但我的问题是当克隆部分时元素的 id 是相同的，那么当克隆部分时如何更改 id 。

我的js函数

var countCopies1;
var clone ;

function duplicate() {
    var original = document.getElementById('duplicater1');
    clone = original.cloneNode(true); 
    var countCopies = $('body').html().split('duplicater').length;
    clone.id = "duplicater"+countCopies;
    original.parentNode.appendChild(clone);
    countCopies1 = countCopies;
}

我的表ID为duplicater1。当我复制它时，id 更改为 duplicater2、duplicater3 等，但我的 id 客户、项目、帖子，新复制表中的小时数保持不变。我如何更改它们以及我需要在 duplicater2 id customer1, project1, post1, hours1。

如果你帮助我，我将不胜感激!

<div id="duplicater1"> 

    <br></br>

  <table class="table table-bordered">

    <thead>
      <tr>
        <th style="width:16%;text-align:center">{Customer}</th>
        <th style="width:16%;text-align:center">{Project}</th>
        <th style="width:16%;text-align:center">{Activity}</th>
        <th style="width:16%;text-align:center">{Hours}</th>
        <th style="width:16%;text-align:center">{Comment}</th>
        <th style="width:5%"> </th>
      </tr>
    </thead>

<tbody>

    <td>
        <div class="form-inline" style="text-align:center"><select style="width:200px" id="customer" class="form-control" onchange="getCustomerAddWork(this)">{CUSTOMERS}</select></div>
    </td>

    <td>
        <div class="form-inline" style="text-align:center"><select style="width:200px" id="project" class="form-control" onchange="getProjectAddWork(this)"></select></div>
    </td>

    <td>
        <div class="form-inline" style="text-align:center"><select style="width:200px" id="post" class="form-control"></select></div>
    </td>

     <td>
        <div class="form-inline" style="text-align:center">
        <div class="form-group">
            <input type="number" class="form-control" id="hours" placeholder="{Hours}">
        </div>
        </div>
    </td>

    <td>
        <div class="form-inline" style="margin-bottom:1em;text-align:center">
        <div class="form-group">
            <textarea class="form-control"  id="comment" placeholder="{Comment}"></textarea>
        </div>
        </div>
    </td>

    <td>
        <button type="button" class="btn btn-danger" style="width:70px" 
 onclick="Remove()">{Delete}</button>
        </td>

    </tbody>

 </table>  

 </div>
</div>
    <div class="container-fluid bg-2 text-center" style="margin-top:5em;margin-bottom:3em;">

    <button type="button" class="btn btn-success" onclick="duplicate()">{Add}</button>
<button type="button" class="btn btn-info" onclick="AddWork()">{Submit}</button>
<button type="button" class="btn btn-primary" onclick="Redirect()">{Cancel}</button>  

</div>
 </form>

Answer 1

既然你有 jQuery，我会做这样的事情:

var original = $("#duplicater1");


function duplicate() {
    var countCopies = $("[id^='duplicater']").length + 1;
    var cloned = original.clone();
    var cloned.attr("id", "duplicater" + countCopies);
    $(cloned).find("[id]").each(function(){
        var current = $(this);
        var currentId = current.attr("id");
        var ids = $("[id='" + currentId + "']");
        if(ids.length > 1 && ids[0]==this){
            var newId = currentId.substring(0, currentId - 1);
            current.attr("id", newId + countCopies);
        }

    });
    original.parent().append(cloned);

}