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

我是这样做的:

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

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


当前回答

试试这个:非常简单的方法

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo(“#myTable tbody”);<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js“></script><table id=“myTable”><tbody><tr><td>1</td></tr><tr><td>2</td></tr></tbody></table>

其他回答

如果你有一个<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>");
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

您可以缓存页脚变量并减少对DOM的访问(注意:使用假行而不是页脚可能会更好)。

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

上面的答案非常有用,但当学生参考此链接从表单中添加数据时,他们通常需要一个示例。

我想提供一个示例,从from获取输入,并使用.after()使用字符串插值将tr插入到表中。

function add(){
  let studentname = $("input[name='studentname']").val();
  let studentmark = $("input[name='studentmark']").val();

  $('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}

函数add(){let studentname=$(“input[name='studentname']”).val();let studentmark=$(“input[name='studentmark']”).val();$('#student-tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><!DOCTYPE html><html><head><style>表{字体系列:arial,sans-serif;边界塌陷:塌陷;宽度:100%;}td,第{边框:1px实心#dddddd;文本对齐:左侧;填充:8px;}tr:第n个孩子(偶数){背景色:#dddddd;}</style></head><body><表单><input-type='text'name='studentname'/><input-type='text'name='studentmark'/><input-type='button'onclick=“add()”value=“add new”/></form><table id=“学生”><thead><th>名称</th><th>标记</th></thead></table></body></html>

如果要在<tr>第一个子项之前添加行。

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

如果要在<tr>最后一个子项之后添加行。

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

所以,自从@Luke Bennett回答这个问题后,情况就发生了变化。这里有一个更新。

jQuery自1.4版(?)起自动检测您试图插入的元素(使用append()、prepend()、before()或after()方法中的任何一种)是否是<tr>,并将其插入到表中的第一个<tbody>中,如果不存在,则将其包装到新的<tbody中。

因此,是的,您的示例代码是可以接受的,并且可以与jQuery1.4+一起工作。;)

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