我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
对于此处发布的最佳解决方案,如果最后一行上有一个嵌套表,则新行将添加到嵌套表而不是主表。快速解决方案(考虑带/不带tbody的表和带嵌套表的表):
function add_new_row(table, rowcontent) {
if ($(table).length > 0) {
if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
}
}
用法示例:
add_new_row('#myTable','<tr><td>my new row</td></tr>');
其他回答
这是我的解决方案
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
将向表的第一个TBODY添加新行,而不依赖于存在的任何THEAD或TFOOT。(我没有从jQuery.append()的哪个版本找到该行为的信息。)
您可以在以下示例中尝试:
<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
<tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>
<table class="t"> <!-- table with two TBODYs -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
<tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
<tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>
<table class="t"> <!-- table without TBODY -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>
<table class="t"> <!-- table with TR not in TBODY -->
<tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>
<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>
在该示例中,b行插入在1 2之后,而不是第二示例中的3 4之后。如果表为空,jQuery将为新行创建TBODY。
上面的答案非常有用,但当学生参考此链接从表单中添加数据时,他们通常需要一个示例。
我想提供一个示例,从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>
使用jQuery.append()使用jQuery.appendTo()使用jQuery.after()使用Javascript.insertRow()使用jQuery-添加html行
试试看:
//使用jQuery-append$('#myTable>tbody').append('<tr><td>3</td><td>Smith-Patel</td></tr>');//使用jQuery-appendTo$('<tr><td>4</td><td>J.Thomson</td></tr>').appendTo(“#myTable>tbody”);//使用jQuery-添加html行让tBodyHtml=$('#myTable>tbody').html();tBodyHtml+='<tr><td>5</td><td>Patel S.</td></tr>';$('#myTable>tbody').html(tBodyHtml);//使用jQuery-after$('#myTable>tbody-tr:last').之后('<tr><td>6</td><td>天使布鲁ice</td></tr>');//使用JavaScript-insertRowconst tableBody=document.getElementById('myTable').getElementsByTagName('tbody')[0];const newRow=tableBody.insertRow(tableBody.rows.length);newRow.innerHTML='<tr><td>7</td><td>K。Ashwin</td></tr>';<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“myTable”><thead><tr><th>Id</th><th>名称</th></tr></thead><tbody><tr><td>1个</td><td>约翰·史密斯</td></tr><tr><td>2个</td><td>汤姆·亚当</td></tr></tbody></table>
我建议
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
与
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
第一个和最后一个关键字作用于要启动的第一个或最后一个标记,而不是关闭。因此,如果您不希望更改嵌套表,而是将其添加到整个表中,则这在嵌套表中的效果更好。至少,这是我发现的。
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>