动态地向表中添加多行

Question

下面的代码工作正常，因为我能够添加多个'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>

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元素”，但所有（？）浏览器中的解析器都使用向后兼容的方法，在添加tr时插入tbody （如果没有tbody ）

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