我使用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>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
var html = $('#myTableBody').html();
html += '<tr><td>my data</td><td>more data</td></tr>';
$('#myTableBody').html(html);
or
$('#myTableBody').html($('#myTableBody').html() + '<tr><td>my data</td><td>more data</td></tr>');
其他回答
为了在这个主题上添加一个好例子,如果您需要在特定位置添加一行,这里有一个有效的解决方案。
额外的行添加在第5行之后,如果少于5行,则添加在表的末尾。
var ninja_row = $('#banner_holder').find('tr');
if( $('#my_table tbody tr').length > 5){
$('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
$('#my_table tr:last').after(ninja_row);
}
我把内容放在桌子下面一个现成的(隐藏的)容器上。。因此,如果您(或设计师)必须更改,则无需编辑JS。
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
如果您有另一个变量,您可以在<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);
// Create a row and append to table
var row = $('<tr />', {})
.appendTo("#table_id");
// Add columns to the row. <td> properties can be given in the JSON
$('<td />', {
'text': 'column1'
}).appendTo(row);
$('<td />', {
'text': 'column2',
'style': 'min-width:100px;'
}).appendTo(row);
使用JQuery添加tabe行:
如果要在表的最后一个子行之后添加行,可以尝试以下操作
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
如果要添加表的第1行子级,可以尝试以下操作
$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
当表中没有任何行时,我使用这种方式,而且每一行都非常复杂。
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...