添加行使用jQuery表的TBODY(Adding rows to tbody of a table

我想行添加到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:

用这个

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

Answer 3:

我还从来没有碰到过这样一个奇怪的问题是这样！ OO

你知道问题是什么？ $不能正常工作。 我尝试相同的代码与jQuery像jQuery("#tblEntAttributes tbody").append(newRowContent); 和它的作品就像一个魅力！

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

Answer 4:

正如@wirey说appendTo应该工作，如果没有的话，你可以试试这个：

$("#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:

随着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

文章来源: Adding rows to tbody of a table using jQuery