动态改变id属性值答案

【问题标题】：Dynamically change id attribute value动态改变id属性值
【发布时间】：2013-10-16 10:49:09
【问题描述】：

我有一个表单，我需要在点击按钮时动态添加某些行。点击时会动态添加 HTML，但我需要为动态添加的元素更改 id 值。

Js 代码

   $(function () {
    $('.click').on('click', function () {

        $('#mytable tbody tr').clone(true).insertAfter('#mytable tbody');

    });

});

我需要<input type="text" id="name_1" /> 为每个文本框 的id 属性添加一个增量值。有什么想法吗？

【问题讨论】：

为什么不使用类呢？
.. 正确并最终将 id 设置为第一个共同祖先

标签： javascript jquery

【解决方案1】：

如果您想在添加时更改每个文本框的 ID，请尝试以下操作：

// Code goes here
$(function(){
  var unique_id=0
  $('.click').on('click',function(){
    unique_id++
    $('#mytable tbody tr').clone(true).insertAfter('#mytable tbody')
      .find("input")
        .each(function(){
          $(this).attr("id",$(this).attr("id")+"_"+(unique_id))
        })

  });

});

分叉你的 Plunker：http://plnkr.co/edit/R6qvaZ2m2Kt2DEGL3SWF?p=preview

注意：此表单数据将无法正确提交，因为字段没有任何名称值。如果您打算让表单自然提交，而不必依赖 JS，您可以尝试以下方法：

<input type="text" name="name[]" />
<input type="text" name="age[]" />
<input type="text" name="salary[]" />

...在这种情况下，您完全可以复制输入字段，而不必给每个字段一个唯一的 ID。

【讨论】：

我刚刚意识到它并没有完全按照我的预期工作 - 我已经更新了这两个地方的代码。

【解决方案2】：

您可以使用以下方法更改 id 属性：

$(selector).attr('id', 'new-id-here');

【讨论】：

【解决方案3】：

我认为您需要在插入克隆元素之前更改其 ID？您可以尝试在这个可能类似的问题上发布的答案：How to JQuery clone() and change id

var c = 0;
$("button").on('click',function(){
  var klon = $( '#id'+ c );
  klon.clone().attr('id', 'id'+(++c) ).insertAfter( klon );
});

jsfiddle here

【讨论】：

感谢您的回复.. 我需要更改每个文本框的 id
啊，明白了。那么在这种情况下你真的需要使用 ID 吗？除非您绝对在每个文本字段上都需要唯一的 ID，否则 Johan 对您的帖子的评论可能是一个更好的主意。