我使用jQuery向表中添加一行作为最后一行。

我是这样做的:

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?


当前回答

我尝试过最受欢迎的一种,但它对我不起作用,但下面的效果很好。

$('#mytable tr').last().after('<tr><td></td></tr>');

即使那里有一个雪橇,它也会起作用。

其他回答

你建议的方法并不一定能给你带来你想要的结果——例如,如果你有一个tbody:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

您将得到以下结果:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

因此,我建议采用以下方法:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

您可以在after()方法中包含任何内容,只要它是有效的HTML,包括上面示例中的多行。

更新:在最近使用此问题进行活动后,重新审视此答案。无眼是一个很好的评论,即DOM中总会有一个tbody;这是正确的,但前提是至少有一行。如果没有行,除非您自己指定了一行,否则不会有tbody。

DaRKoN_建议在tbody之后添加内容,而不是在最后一个tr之后添加内容。这解决了没有行的问题,但仍然不可靠,因为理论上可以有多个tbody元素,行将添加到每个元素中。

权衡一切,我不确定是否有一个单一的单线解决方案能够解决每一种可能的情况。您需要确保jQuery代码与标记相符。

我认为最安全的解决方案可能是确保您的表始终在标记中包含至少一个tbody,即使它没有行。在此基础上,您可以使用以下方法,无论您有多少行(也可以考虑多个tbody元素)都可以使用:

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

如果您正在使用Datatable JQuery插件,可以尝试。

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

参考数据表fnAddData数据表API

我尝试过最受欢迎的一种,但它对我不起作用,但下面的效果很好。

$('#mytable tr').last().after('<tr><td></td></tr>');

即使那里有一个雪橇,它也会起作用。

这可以使用jQuery的“last()”函数轻松完成。

$("#tableId").last().append("<tr><td>New row</td></tr>");

如果你有一个<tbody>和一个<tfoot>呢?

例如:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

然后它将在页脚中插入新行,而不是插入正文。

因此,最好的解决方案是包含<tbody>标记并使用.append,而不是.after。

$("#myTable > tbody").append("<tr><td>row content</td></tr>");