jquery - 使用jquery添加tr

Question

我添加了一个jquery函数来添加<tr>动态地在我的 table 的末尾。它工作得很好，直到我将表头添加到我的表中。执行此操作后，该函数开始添加 2 <tr>一次上 table 。发生了什么？

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 包围您的 th 来补偿您的代码。尝试用头部围绕 th。

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