[英]JQuery: How to add an existing <td> element using its id to a new <tr> element?
与此相关的 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"))
但这也行不通。 知道为什么这不起作用以及需要做什么吗?
查看您的 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>
您需要先创建一个副本(克隆),然后再创建 append。 尝试这个:
`$("#constraintTable tr: last").append($("#editDelete").clone(true))`
您不能对多个元素使用相同的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.