Question

我目前正在克隆表格中的特定行，并将其附加到底部（以及清除任何输入字段中的任何值）

像这样：

$("#gn_Row_0").clone().find("input:text").val("").end().appendTo("#green_zone .medicine_table");

到目前为止，这一直很有效..但是我注意到我还需要更新ID，不仅是我正在克隆的主TR /行，还有嵌套的SELECT和＆＃39; 2＆＃39;此TR /行中嵌套TD的ID（第2和第3个）。

类似于这个标记:(整个标记被克隆并添加到表的末尾）

<tr id="change this id 1">
    <td>
        <select id="change this id 2"></select>
    </td>

    <td id="change this id 3"></td>
    <td id="change this id 4"></td>
</tr>

我尝试更改当前行（只是为了查看是否可以更新其中一个ID）

$("#gn_Row_0").clone().find("tr").prop('id', 'newID_here').end().find("input:text").val("").end().appendTo("#green_zone .medicine_table");

然而，我没有成功。如何更改全部＆＃39; 4＆＃39;我的克隆内容中有id？

更新

SORRY！

我明白了。我认为TR上的初始find（）现在可以正常工作，因为那是克隆的ID

这对我有用：

$("#gn_Row_0").clone().prop('id', 'newID_here').find("select").prop('id', 'newID_here2').end().find("td:eq(1)").prop('id', 'newID_here3').end().find("td:eq(2)").prop('id', 'newID_here3').end().find("input:text").val("").end().appendTo("#green_zone .medicine_table");

Answer 1

我建议依赖简单的HTML模板

Pesudo代码：

模板：

<script class="js-row-template" type="text/html">
    <tr id="change this {{id}}">
        <td>
            <select id="change this {{id}}"></select>
        </td>

        <td id="change this {{id}}"></td>
        <td id="change this {{id}}"></td>
    </tr>
</script>

代码：

var template = $(".js-row-template").html();

var index = 0;

var model = {
    id: "id" + index,
    data: {
        // enter in extra data that you can pull from tr being cloned
    }
};

var templateMarkup = template.replace("{{id}}", model.id);

$(templateMarkup).appendTo("#green_zone .medicine_table");

这样，如果标记的复杂性增加，您必须更新模板，更好的是，使用第三方模板库，如把手等

jQuery更改克隆内容的多个ID

1 个答案: