Question

我添加了一个jquery函数，用于在表的末尾动态添加<tr>。它工作正常，直到我将表头添加到我的表。执行此操作后，该函数开始一次向表中添加2 <tr>秒。发生了什么事？

HTML：

<table id="table" border="0">
<th>Col 1</th><th>Col2</th><th>col3</th>
<tbody>
<tr>
    <td>
        <select>
            <option value ="one">one</option>
            <option value="two">two</option>
        </select>
    </td>
    <td>
        <input type="text"></input>
    </td>
    <td>
        <input type="text"></input>
    </td>
</tr>
</tbody>
</table>

JQuery代码：

$(function(){
  $('a#add').click(function(){
    $('#table > tbody').append('<tr><td><select><option value ="one">one</option><option value="two">two</option></select></td><td><input type="text"></input></td><td><input type="text"></input></td></tr>');  
  });

Answer 1

浏览器将通过用另一个tbody包围您的代码来补偿您的代码。试着用thead围绕着它。

<table id="table" border="0">
    <thead>
        <th>Col 1</th><th>Col2</th><th>col3</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <select>
                    <option value ="one">one</option>
                    <option value="two">two</option>
                </select>
            </td>
            <td>
                <input type="text"></input>
            </td>
            <td>
                <input type="text"></input>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

如果您要使用tbody，则还需要使用thead。

Answer 3

向您的选择器添加:last，如此（demo，source）：

$(function(){
  $('a#add').click(function(){
    $('#table > tbody:last').append('<tr><td><select><option value ="one">one</option><option value="two">two</option></select></td><td><input type="text"></input></td><td><input type="text"></input></td></tr>');  
    return false;
  });
});

由于您的标头不属于tbody或thead，因此浏览器会自动为其创建tbody。因此，您呈现的表格具有两个 tbody s。 更好的解决方案是保留当前的选择器，将标题放在thead部分中，如下所示：

<thead>
<th>Col 1</th><th>Col2</th><th>col3</th>
</thead>

或者只是将它放在现有的tbody中，这样浏览器就不会再制作新的了。

Answer 4

从jQuery选择器中删除> tbody。之后它对我来说很好。

$('a#add').click(function(){
  $('#table').append('<tr><td><select><option value ="one">one</option><option value="two">two</option></select></td><td><input type="text"></input></td><td><input type="text"></input></td></tr>');  
});

使用jquery添加tr

4 个答案: