Question

我对Javascript很新，我想知道如何在生成的HTML文本框中添加唯一ID。我目前正在使用此脚本创建文本框：

$(document).ready(function () {
    var tbId = 'expense';
    var chkId = 'Mastercard';


    $("#txt").click(function () {

        var br = document.createElement("br");
        var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId }).addClass("form-control tb_Id");
        var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId }).addClass("chk chk_Id");
        $("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br);
    });


});

这是添加和保存文本框的HTML代码：

<input type="button" id="txt" value="Add TextBox"/>
<div id="ExpenseBoxes">
</div>

我希望文本框ID被命名为“expense1，expense2，expense3~”，但我不知道该怎么做。

Answer 1

使用计数器怎么样？

$(document).ready(function () {
  var tbId = 'expense';
  var chkId = 'Mastercard';
  var elementCounter = 0;


  $("#txt").click(function () {
    var br = document.createElement("br");
    var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId + (++elementCounter) }).addClass("form-control tb_Id");
    var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId }).addClass("chk chk_Id");
    $("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="txt" value="Add TextBox"/>

<div id="ExpenseBoxes">
</div>

只需创建此var elementCounter = 0;，就像id: tbId + (++elementCounter)一样连接，您将获得增量ID“expense1”，“expense2”，“expense3”等等。

Answer 2

这适用于您的情况

 var brInput = document.createElement("br");
    brInput.setAttribute("id", "uniqueIdentifier");

如何为动态添加的控件添加唯一ID（Asp.net MVC）

2 个答案: