使用jquery添加tr

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

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>'); 
});