Question

我正在创建一个动态添加行的脚本。我正在使用以下功能。但问题是它确实创建了新行，但没有为元素分配唯一的ID。

使用Javascript：

$(document).ready(function () {
    var counter = 1;
    $("#add_row").click(function () {
        var row_id = "row" + counter;
        console.log(row_id);
        new_elem = $("#new_row").clone().appendTo("#table_invoice tbody").show().attr("id", row_id);
        var button_id = "button" + row_id;
        var input_id = "row" + row_id;
        document.getElementById('row_id').firstChild.setAttribute('id',input_id);
        document.getElementById('row_id').firstChild.nextSibling.setAttribute('id',button_id);
        console.log(button_id);
        console.log(input_id);
        counter += 1;
    });
});

HTML：

<table class="table table-striped" id="table_invoice">
    <thead>
        <tr>
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Product Price</th>
        </tr>
    </thead>
    <tbody>
<tr id ="new_row" style="display:none;">
    <th><input type="text" class="form-control" placeholder="Enter Product ID" /></th>
    <th><button type="button" class="btn btn-default"">Add Product</button></th>
    <th></th>
    <th></th>
</tr>
</tbody>
</table>
<a id="add_row" class="btn bt-default">Add New Row</a>

另外，我收到以下错误：

TypeError：document.getElementById（...）。firstChild.setAttribute不是函数

无法弄清楚为什么这不是一个有效的功能。

Answer 1

这意味着它无法在前面的方法中找到元素，最多firstChild。由于找不到元素，因此该链中的值未定义，当然没有方法setAttribute。如果它找到了您正在寻找的元素，那么错误就不会出现。

The problem is you're doing this:

的document.getElementById（＆＃39; ROW_ID＆＃39）

当你的意思

document.getElementById('row_id')

...即。 row_id是一个变量，应该如此指定，而不是字符串。

Answer 2

使用jQuery就是这样做的： DEMO

请注意，我已将所有row_id更改为“反击”，因为我认为这是预期的方法。

$(document).ready(function () {
        var counter = 1;
        $("#add_row").click(function () {
            var row_id = "row" + counter;
            console.log(row_id);
            new_elem = $("#new_row").clone().appendTo("#table_invoice tbody").show().attr("id", row_id);
            var button_id = "button" + counter;
            var input_id = "input" + counter; //I think you meant "input" because if you set "row" at the beginning it would be duplicated of the tr
            $('#'+row_id).find('button').attr('id',button_id);
            $('#'+row_id).find('input').attr('id',input_id);
            console.log(button_id);
            console.log(input_id);
            counter++;
        });
    });

在动态创建时设置表单元素的唯一ID

2 个答案: