使用jQuery向表格的tbody添加行

Question

我正在尝试向表格的 tbody 添加行，但是我在实现过程中遇到了问题。首先，在一个 HTML 页面的下拉菜单发生更改时调用函数进行操作。我创建了一个包含所有 td 元素、文本和其他内容的 tr 字符串。但是当我尝试使用以下代码将生成的行添加到表格中时：

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

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

实际上发生的是 jQuery 无法将 tblEntAttributes 作为 HTML 元素获取。但是我可以使用 document.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)似乎无法工作。

- Anupam

---

你能否发布一些DOM的片段（主要是相关的表格）？ - El Guapo

$('#Table1 > tbody') - Roman M

Answer 1

("#tblEntAttributes tbody")

需要更改为

$("#tblEntAttributes tbody")。

你选取元素的语法不正确。

以下是两个示例：

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

并且

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

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

- wirey00

---

颠倒语法可能更易读：$("#tblEntAttributes tbody").append(newRowContent);。 - Frédéric Hamidi

我已经在原帖中添加了代码。它一直报错："Microsoft JScript运行时错误：无法获取属性'append'的值：对象为null或未定义"。 - Anupam

你把这些代码放在$(document).ready(function() { // 在此处加入一些代码 }); 之内了吗？可能是因为代码在DOM准备好之前就执行了，所以你无法选择元素。在这里找到了一个类似的错误：https://dev59.com/O1rUa4cB1Zd3GeqPlJTC - wirey00

@webNoob13 如果你想更具体，那也可以。 - wirey00

@mLstudent33 我认为这取决于你在做什么。如果你只做一些可以用原生JS完成的简单事情，那就没必要引入库了。如果你已经在使用该库，则最好使用它提供的工具来保持一致性。 - wirey00

Answer 2

使用这个

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

- user3962745

Answer 3

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

你知道问题是什么吗？$符号无法工作。我尝试了与jQuery相同的代码，如jQuery("#tblEntAttributes tbody").append(newRowContent); ，而它可以完美地工作！

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

- Anupam

---

你应该了解一下jQuery.noConflict()。可能是因为你正在使用其他库也使用了$别名 http://api.jquery.com/jQuery.noConflict/ - wirey00

Answer 4

这是一个使用你提到的HTML下拉列表的appendTo版本。它会在“更改”时插入另一行。

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

这里有一个示例供您使用。祝您好运！

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

- Andrew

Answer 5

正如@wirey所说，如果appendTo无法工作，则可以尝试以下方法：

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

- thecodeparadox

Answer 6

使用 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上的例子。

- asmmahmud