使用 jQuery 将行添加到表的 tbody

Question

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

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

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

实际上，jQuery 无法将 tblEntAttributes 作为 html 元素。但我可以使用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) 似乎不起作用。

Answer 1

("#tblEntAttributes tbody")

需要

$("#tblEntAttributes tbody")。

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

这是两者的例子

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

和

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

工作 http://jsfiddle.net/xW4NZ/

Answer 2

使用 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

Answer 3

使用这个

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

Answer 4

我从来没有遇到过这样奇怪的问题！ o.O

你知道问题出在哪里吗？ $ 不工作。我用 jQuery 尝试了相同的代码，例如 jQuery("#tblEntAttributes tbody").append(newRowContent);，它的工作原理就像一个魅力！

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

Answer 5

这是使用您提到的 html 下拉列表的 appendTo 版本。它在“更改”上插入另一行。

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

有一个例子供你玩。祝你好运！

http://jsfiddle.net/xtHaF/12/

Answer 6

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

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