我使用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>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
您可以使用这个很棒的jQuery添加表行函数。它适用于有<tbody>但没有的表。它还考虑了最后一行表格的列跨度。
下面是一个示例用法:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
其他回答
如果您有另一个变量,您可以在<td>标记中访问,就像那样。
这样我希望会有帮助
var table = $('#yourTableId');
var text = 'My Data in td';
var image = 'your/image.jpg';
var tr = (
'<tr>' +
'<td>'+ text +'</td>'+
'<td>'+ text +'</td>'+
'<td>'+
'<img src="' + image + '" alt="yourImage">'+
'</td>'+
'</tr>'
);
$('#yourTableId').append(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>")
当表中没有任何行时,我使用这种方式,而且每一行都非常复杂。
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
使用JQuery添加tabe行:
如果要在表的最后一个子行之后添加行,可以尝试以下操作
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
如果要添加表的第1行子级,可以尝试以下操作
$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
使用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>