Javascript 向表中动态添加多行

下面的代码运行良好，因为我可以根据需要添加多个“tr”行，但同时还创建了多个“tbody”元素。因此，我试图找到一个解决方案，其中我只创建一次“tbody”并添加多行

$results.each(function(){
       $('#tbl').append($('<tbody>')
                .append($('<tr>')
                .append('<td>' + Item_val + '</td>')
                .append('<td>' + Name_val + '</td>')
                .append('<td>' + No_val + '</td>'))                                
        );
});

<table id="tbl">
        <thead>
            <tr>
                <th>Item</th>
                <th>Name</th>
                <th>No</th>                    
            </tr>        
        </thead>        
</table>

$results.each（函数（）{
$（'#tbl'）。附加（$（''）
.append（$（''）
.附加（“”+项值+“”）
.append（“”+名称\值+“”）
.附加（“”+无值+“”））
);
});
项目
名称
不

浏览器不需要添加

tbody

，而是在后台添加一个

只需添加行：

results.each(function(){
       $('#tbl').append($('<tr>')
                .append('<td>' + Item_val + '</td>')
                .append('<td>' + Name_val + '</td>')
                .append('<td>' + No_val + '</td>'))                                
        );
});

代码：

警报（$（'table tbody'）.length）；//警报0
$（“表”）。追加（“”）；
警报（$（'table tbody'）。长度）；//警报1

JSFiddle:

笔记：

• 尽管HTML5浏览器规范规定表可能“直接包含

  TR

  元素”，但所有（？）浏览器中的解析器都使用向后兼容的方法，在添加

  TR

  时插入

  tbody

  （如果不存在

  tbody

  ）

var mytablecontainer=$（“#tbl”）；
var mytable=mytablecontainer.find（'tbody'）；
如果（！mytable.length）{mytablecontainer.append（$（“”）}
mytable=mytablecontainer.find（'tbody'）；
mytable.append（）//其余的附件

您需要关闭tr吗？@Chizzle:不需要。如果单个标记不是自动关闭的，jQuery将关闭它们。

“

”、

“

和

”

都做同样的事情，所以请坚持使用简短的版本。这将起作用，但有点毫无意义，因为

tbody

应该一直存在（当添加TRs时，浏览器会自动将其添加到

表中。

）。下面是一个简单的例子：我从不根据浏览器的历史行为做出假设-查看HTML5规范的历史记录，并对该主题进行了一些讨论-例如，一些东西之所以有效，只是因为浏览器制造商“做了”这样做不是因为规范。我只是搜索了一下HTML浏览器规范，发现在添加

tr

时插入

tbody

是解析器规范的一部分（如果不存在

tbody

）：例如，是的，我不太清楚的一部分是HTML5规范中有一些。感谢您发布特定参考的链接！

<table></table>

alert($('table tbody').length);   // alerts 0
$('table').append('<tr>'); 
alert($('table tbody').length);   // alerts 1

var mytablecontainer = $('#tbl');
var mytable = mytablecontainer.find('tbody');
if (!mytable.length){mytablecontainer.append($('<tbody>')}
mytable = mytablecontainer.find('tbody');
mytable.append()// rest of your appends