JQuery：如何使用其 id 将现有 <td> 元素添加到新的 <tr> 元素？

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 向此 table 添加一行：（假设上面html中的'row'集合只有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 进入，最后一列只是空白。我什至尝试添加没有 edit/delete 列的行，然后像这样添加 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

您需要先创建一个副本（克隆），然后追加。试试这个：

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

Answer 3

您不能对多个元素使用相同的 id 而是使用 class 。然后，无论何时调用您的函数，您都可以 clone 您的 td.editDelete 并在您的内部添加相同的内容使用 $(htmls).html().

生成 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>

JQuery：如何使用其 id 将现有 <td> 元素添加到新的 <tr> 元素？

JQuery: How to add an existing <td> element using its id to a new <tr> element?

html

javascript

jquery

jinja2