如何使用Javascript在tbody的最後一行添加行

Question

我是JQuery和Javascript中的新成員。這是我的代碼：

的Javascript：

var newRow = '<tr>abc</tr>'; 
$('#itemTable tr:last').before(newRow); 

HTML代碼：

<table id='itemTable'> 
<tbody> 
<tr>zxcv</tr> 
</tbody> 
<tfoot> 
<tr>asdfghjk</tr> 
</tfoot> 
</table> 

如果使用JavaScript裏面添加的新行的上方，但我想之前裏面添加TBODY新行最後tr。如何解決它？

謝謝

Answer 1

所有你需要知道的表結構html Table

1）發現身體和之前的最後一個

var newRow = '<tr><td>abc</td></tr>'; 
 
$('#itemTable tbody tr:last').before(newRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id='itemTable' border="2px"> 
 
    <tbody> 
 
     <tr> 
 
      <td>zxcv</td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr> 
 
      <td>asdfghjk</td> 
 
     </tr> 
 
    </tfoot> 
 
</table>

Answer 2

呢？所以追加到TBODY

var newRow = '<tr><td>abc</td></tr>'; 
$('#itemTable tbody').append(newRow); 

如果您在TBODY最後一行時希望它比選擇在TBODY的最後一行，並插入之前。

$('#itemTable tbody tr').last().before(newRow); 

Answer 3

追加你可以檢查它的第一個這樣：

$('#itemTable tbody tr:last').before(newRow); 

Answer 4

您應該使用tr中的td來包含實際值。然後針對最後tr內tbody和使用after()像下面這樣：

var newRow = '<tr><td>abc</td></tr>'; 
 
$('#itemTable tbody tr:last').after(newRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='itemTable'> 
 
    <tbody> 
 
     <tr><td>zxcv</td></tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr><td>asdfghjk</td></tr> 
 
    </tfoot> 
 
</table>

Answer 5

你可以試試這個

var newRow = '<tr><td>abc</td></tr>'; 
 
$('#itemTable tbody tr:last').before(newRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='itemTable'> 
 
<tbody> 
 
<tr><td>aaa</td></tr> 
 
<tr><td>CCC</td></tr> 
 
</tbody> 
 
<tfoot>