JQuery：如何使用其 id 將現有元素添加到新元素？

Question

與此相關的 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"))

但這也行不通。 知道為什么這不起作用以及需要做什么嗎？

Answer 1

查看您的 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>

Answer 2

您需要先創建一個副本（克隆），然后再創建 append。 嘗試這個：

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

Answer 3

您不能對多個元素使用相同的id ，而是使用class 。然后，每當您的 function 被調用時，您可以clone td.editDelete並在生成的 ZFC35FDC70D5FC69D269883 $(htmls).html()中添加相同的內容。

演示代碼：

 function constraintAddToTable() { if ($("#constraintTable tbody").length == 0) { $("#constraintTable").append("<tbody></tbody>"); } //get td >first clone it var htmls = $("td.editDelete:first").clone() //add inside your genearted htmls... $("#constraintTable tbody").append("<tr>" + "<td>" + "dataval1" + "</td>" + "<td>" + "dataval2" + "</td><td>" + $(htmls).html() + "</td></tr>"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="constraintTable"> <tr> <th>Soemthing</th> <th>Soemthing1</th> <th>Action</th> </tr> <tr> <td>1</td> <td>2</td> <;--use class--> <td class="editDelete"> <a href="#" class="editRow">Edit</a> <a href="#" class="deleteRow">Delete</a> </td> </tr> <tr> <td>11</td> <td>22</td> <td class="editDelete"> <a href="#" class="editRow">Edit</a> <a href="#" class="deleteRow">Delete</a> </td> </tr> </table> <button type="button" class="btn btn-primary" id="addConstraint" onclick="constraintAddToTable();">Add New Constraint</button>