动态地向表中添加多行

Question

以下代码可以正常工作，因为我可以添加多个＆＃39; tr＆＃39;行，因为我需要它，但同时多个＆＃39; tbody＆＃39;元素也被创建。所以，我正在努力找到一个解决方案，我只会创建一个＆＃39; tbody＆＃39;一次并添加多行。

$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>

Answer 1

浏览器不需要附加tbody，并且会在幕后添加一个。

只需添加您的行：

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

这是一个简单的测试，显示添加TR时会自动添加tbody：

HTML

<table></table>

代码：

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

JSFiddle： http://jsfiddle.net/m2z2cmur/

说明：

• 虽然HTML5浏览器规范指出一个表可能直接包含TR个元素＆＃34;但是所有（？）浏览器中的解析器都使用向后兼容的方法来插入{{1} }添加tbody时（如果不存在tr）

Answer 2

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