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


74

我试图将行添加到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)似乎无法正常工作。


您可以张贴一些DOM片段(主要是有关表格)吗
El Guapo 2012年

1
$( '#表1> TBODY')来自stackoverflow.com/questions/6763006/...
罗马中号

Answers:


109

("#tblEntAttributes tbody")

需要是

$("#tblEntAttributes tbody")

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

这是两个例子

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

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

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


7
反转语法可能更具可读性:$("#tblEntAttributes tbody").append(newRowContent);
弗雷德里克哈米迪

我已经在OP中添加了代码。它不断给出错误:“ Microsoft JScript运行时错误:无法获取属性'append'的值:对象为null或未定义”
Anupam 2012年

您是否将它们放在$(document).ready(function(){//这里有一些代码})中?可能是因为在dom准备就绪之前代码正在运行,这就是为什么您无法选择元素的原因。发现了类似的错误在这里stackoverflow.com/questions/7173398/...
ᾠῗᵲ ᄐ ᶌ

$("#tblEntAttributes > tbody")为直接孩子的身体?
mLstudent33 '20

1
@ webNoob13是啊,如果你想更具体的,应该工作太
ᄐ ᶌᾠῗᵲ

37

用这个

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

16

我从来没有遇到过这样一个奇怪的问题!O

您知道问题出在哪里吗?$不起作用。我用jQuery尝试了相同的代码,jQuery("#tblEntAttributes tbody").append(newRowContent);它就像一个魅力!

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


11
您应该阅读有关jQuery.noConflict()的内容。可能是您使用的其他库也使用$别名api.jquery.com/jQuery.noConflict
2012年

5

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

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

为您提供示例。祝你好运!

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


3

正如@wirey所说的appendTo应该起作用,否则,您可以尝试以下操作:

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

0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.