使用 jQuery 向表的 tbody 添加行

Adding rows to tbody of a table using jQuery

提问by Anupam

I am trying to add rows to the tbodyof a table. But I am having issues with achieving that. Firstly, the function where everything takes place is called on change of a dropdown from a html page. I created a trstring containing all the tdinside that containing the html elements, text and other stuff. But when I am trying to add that generated row to the table using:

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

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

I am encountering an error. The name of the table is tblEntAttributesand I am trying to add it to the tbody.

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

Actually what's happening is jQuery is unable to get tblEntAttributesas an html element. But I can access it using documemt.getElementById("tblEntAttributes");

实际上发生的事情是 jQuery 无法tblEntAttributes作为 html 元素获取。但我可以使用它访问它documemt.getElementById("tblEntAttributes");

Is there any way I can achieve this by adding rows to the tbodyof the table. Maybe a bypass or something.

有什么办法可以通过向tbody表的 中添加行来实现这一点。也许是绕过什么的。

Here's the entire code:

这是整个代码：

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); 

One thing I forgot to mention is the function where this code is written is actually the success callback function for a ajax call. I am able to access the table using document.getElementById("tblEntAttributes")but for some reason $(#tblEntAttributes)doesn't seem to work.

我忘记提及的一件事是编写此代码的函数实际上是ajax调用的成功回调函数。我可以使用访问表，document.getElementById("tblEntAttributes")但由于某种原因$(#tblEntAttributes)似乎不起作用。

采纳答案by Anupam

I have never ever come across such a strange problem like this! o.O

我从来没有遇到过这么奇怪的问题！oO

Do you know what the problem was? $ isn't working. I tried the same code with jQuery like jQuery("#tblEntAttributes tbody").append(newRowContent);and it works like a charm!

你知道问题是什么吗？$ 不起作用。我用 jQuery like 尝试了相同的代码，jQuery("#tblEntAttributes tbody").append(newRowContent);它就像一个魅力！

No idea why this strange problem occurs!

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

回答by ?????

("#tblEntAttributes tbody")

("#tblEntAttributes tbody")

needs to be

需要是

$("#tblEntAttributes tbody").

$("#tblEntAttributes tbody").

You are not selecting the element with the correct syntax

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

Here's an example of both

这是两者的示例

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

and

和

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

working http://jsfiddle.net/xW4NZ/

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

回答by user3962745

use this

用这个

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

回答by thecodeparadox

As @wirey said appendToshould work, if not then you can try this:

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

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

回答by Andrew

Here is an appendTo version using the html dropdown you mentioned. It inserts another row on "change".

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

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

With an example for you to play with. Best of luck!

举个例子让你玩玩。祝你好运！

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

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

回答by asmmahmud

With Lodash you can create a template and you can do that following way:

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

And here goes the javascript:

这是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++;
            });
        });

Here it is in jsbin

这是在jsbin中