时间戳

首页 > 解决方案 > JQuery：如何使用其 id 将现有元素添加到新元素？

javascript - JQuery：如何使用其 id 将现有元素添加到新元素？

问题描述

相关的html是：

<table class="table" id="constraintTable">
    <tr>
        {% for header in headings %}
        <th>{{ header }}</th>
        {% endfor %}
        <th>Action</th>
    </tr>
    {% for row in data %}
    <tr>
        {% for cell in row%}
        <td>{{ cell }}</td>
        {% endfor %}
        <td id="editDelete">
            <a href="#" id="editRow">Edit</a>
            <a href="#" id="deleteRow">Delete</a>
        </td>
    </tr>
    {% endfor %}
</table>
<button type="button" class="btn btn-primary" id="addConstraint" onclick="constraintAddToTable();>Add New Constraint</button>

现在我正在尝试使用以下 Jquery 向该表添加一行：（假设上面 html 中的“行”集合只有 2 个条目）

function constraintAddToTable() {
    if ($("#constraintTable tbody").length == 0) {
        $("#constraintTable").append("<tbody></tbody>");
    }
    
    $("#constraintTable tbody").append("<tr>" +
        "<td>" + "dataval1" + "</td>" +
        "<td>" + "dataval2" + "</td>" +
        $("#editDelete") +  
        "</tr>");
}

但这不起作用。只有 dataval1 和 dataval2 进入，最后一列是空白的。我什至尝试添加没有编辑/删除列的行，然后像这样添加 cloumn：

$("#constraintTable tr: last").append($("#editDelete"))

但这也行不通。知道为什么这不起作用以及需要做什么吗？

标签： javascripthtmljqueryjinja2

解决方案

查看您的 HTML 代码，您没有tbody标签。

如下编辑您的 HTML 代码并尝试。

<table class="table" id="constraintTable">
    <tr>
        {% for header in headings %}
        <th>{{ header }}</th>
        {% endfor %}
        <th>Action</th>
    </tr>
    <tbody>          //tbody starts
    {% for row in data %}
    <tr>
        {% for cell in row%}
        <td>{{ cell }}</td>
        {% endfor %}
        <td id="editDelete">
            <a href="#" id="editRow">Edit</a>
            <a href="#" id="deleteRow">Delete</a>
        </td>
    </tr>
    {% endfor %}
    </tbody>         //tbody ends
</table>

推荐阅读