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，但我想在最后一个tr之前在tbody中添加新行。如何解决？

谢谢

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

您应该使用td内的tr来包含实际值。然后定位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>

如何使用Javascript在tbody中的最后一个tr上添加行

5 个答案: