使用 jQuery 将行添加到表的正文中

我正在尝试向表的 tbody添加行。但是我实现这个目标有困难。首先，当 HTML 页面的下拉菜单发生变化时，调用发生所有事情的函数。我创建了一个包含所有 td的 tr字符串，其中包含 html 元素、文本和其他内容。但是，当我试图将生成的行添加到表中时，使用:

$(newRowContent).appendTo("#tblEntAttributes tbody");

我遇到了一个错误。该表的名称是 tblEntAttributes，我试图将其添加到 tbody。

实际上，jQuery 无法获得作为 html 元素的 tblEntAttributes。但我可以用 documemt.getElementById("tblEntAttributes");进入

有没有什么方法可以通过将行添加到表的 tbody来实现这一点。可能是旁路什么的。

这是整个代码:

var newRowContent = "<tr><td><input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"></td><td>" + displayName + "</td><td>" + logicalName + "</td><td>" + dataType + "</td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>";


$("#tblEntAttributes tbody").append(newRowContent);

有一件事我忘了提到，这段代码所写的函数实际上是一个 ajax 调用的成功回调函数。我能够访问表使用 document.getElementById("tblEntAttributes")，但由于某些原因，$(#tblEntAttributes)似乎不工作。

254345 次浏览
小开

("#tblEntAttributes tbody")

必须如此

$("#tblEntAttributes tbody").

您没有使用正确的语法选择元素

这里有一个两者都有的例子

$(newRowContent).appendTo($("#tblEntAttributes"));

还有

$("#tblEntAttributes tbody").append(newRowContent);

工作 Http://jsfiddle.net/xw4nz/

小开

正如@wirey 所说，appendTo应该可以工作，如果不行，你可以试试这个:

$("#tblEntAttributes tbody").append(newRowContent);
小开

这里是一个使用你提到的 html 下拉列表的附录。它在“ change”上插入了另一行。

$('#dropdown').on( 'change', function(e) {
$('#table').append('<tr><td>COL1</td><td>COL2</td></tr>');
});

给你们举个例子，祝你们好运！

Http://jsfiddle.net/xthaf/12/

小开
最佳答案

我从来没有遇到过这样奇怪的问题

你知道问题出在哪吗？$不起作用。我用类似 jQuery("#tblEntAttributes tbody").append(newRowContent);的 jQuery 尝试了相同的代码，它工作起来非常棒！

不知道为什么会出现这种奇怪的问题！

小开

用这个

$("#tblEntAttributes tbody").append(newRowContent);
小开

使用 Lodash，你可以创建一个模板，你可以这样做:

    <div class="container">
<div class="row justify-content-center">
<div class="col-12">
<table id="tblEntAttributes" class="table">
<tbody>
<tr>
<td>
chkboxId
</td>
<td>
chkboxValue
</td>
<td>
displayName
</td>
<td>
logicalName
</td>
<td>
dataType
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" id="test">appendTo</button>
</div>
</div>
</div>

下面是 javascript:

        var count = 1;
window.addEventListener('load', function () {
var compiledRow = _.template("<tr><td><input type=\"checkbox\" id=\"<%= chkboxId %>\" value=\"<%= chkboxValue %>\"></td><td><%= displayName %></td><td><%= logicalName %></td><td><%= dataType %></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>");
document.getElementById('test').addEventListener('click', function (e) {
var ajaxData = { 'chkboxId': 'chkboxId-' + count, 'chkboxValue': 'chkboxValue-' + count, 'displayName': 'displayName-' + count, 'logicalName': 'logicalName-' + count, 'dataType': 'dataType-' + count };
var tableRowData = compiledRow(ajaxData);
$("#tblEntAttributes tbody").append(tableRowData);
count++;
});
});

这是 Jsbin


提交答案