Dar*_*ein 2331 javascript jquery html-table
jQuery中最后一行向表中添加额外行的最佳方法是什么？
这可以接受吗？
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以添加到这样的表(例如输入,选择,行数)的限制是什么？
Luk*_*ett 2068
你建议的方法不能保证给你你想要的结果 - 如果你有一个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,包括上面示例中的多行.
更新:在此问题的最近活动之后重新回答此答案.eyelidless是一个很好的评论,tbody在DOM中总会有一个; 这是事实,但只有至少有一行.如果没有行,tbody除非您自己指定了行,否则将没有行.
DaRKoN_ 建议追加到tbody而不是添加在最后一个内容tr.这解决了没有行的问题,但仍然没有防弹,因为理论上你可以有多个tbody元素,并且行将被添加到每个元素中.
权衡一切,我不确定是否有单一的单线解决方案可以解决每一种可能的情况.您需要确保jQuery代码与您的标记一致.
我认为最安全的解决方案可能是确保您的标记table中至少包含一个tbody,即使它没有行.在此基础上,您可以使用以下工作,但是您可以使用多行(并且还可以考虑多个tbody元素):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Nei*_*eil 748
jQuery有一个内置的工具来动态操作DOM元素.
您可以像这样向表中添加任何内容:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
$('<some-tag>')jQuery中的东西是一个标记对象,它可以有几个attr可以设置和获取的属性,以及text代表这里标记之间的文本:<tag>text</tag>.
这是一些非常奇怪的缩进,但是你更容易看到这个例子中发生了什么.
Sal*_*bas 297
所以自从@Luke Bennett回答这个问题后,事情发生了变化.这是一个更新.
jQuery的自1.4版本(？)会自动检测,如果你试图要插入的元素(使用任意的append(),prepend(),before(),或after()方法)是一个<tr>,并将其插入第一个<tbody>在你的表或它包装成一个新的<tbody>,如果一个不存在.
所以是的,您的示例代码是可以接受的,并且可以与jQuery 1.4+一起使用.;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Cha*_*adT 163
如果你有一个<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>");
sha*_*wat 60
我知道你已经要求使用jQuery方法了.我看了很多,发现我们可以通过以下函数直接使用JavaScript来更好地完成它.
tableObject.insertRow(index)
index是一个整数,指定要插入的行的位置(从0开始).也可以使用-1的值; 这导致新行将插入最后一个位置.
此参数在Firefox和Opera中是必需的,但在Internet Explorer,Chrome和Safari中是可选的.
如果省略此参数,则insertRow()在Internet Explorer的最后一个位置以及Chrome和Safari中的第一个位置插入一个新行.
它适用于HTML表的每个可接受的结构.
以下示例将在last中插入一行(-1用作索引):
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
</body>
</html>
我希望它有所帮助.
Cur*_*tor 34
我建议
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
而不是
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
在first和last第一个或最后一个标记关键字工作启动,没有关闭.因此,如果您不希望更改嵌套表,而是添加到整个表中,则嵌套表会更好.至少,这是我发现的.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
sul*_*est 32
在我看来,最快捷,最明确的方式是
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
//Add row
table.append('<tr><td>hello></td></tr>');
这里是演示 小提琴
此外,我可以推荐一个小函数来进行更多的html更改
//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
return this.replace(re, function (_, k){
return typeof o[k] != 'undefined' ? o[k] : '';
});
}
}());
如果您使用我的字符串编辑器,您可以这样做
var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
'<td>{{id}}</td>'+
'<td>{{name}}</td>'+
'<td>{{phone}}</td>'+
'</tr>';
//Add row
table.append(row.compose({
'id': 3,
'name': 'Lee',
'phone': '123 456 789'
}));
这是演示 小提琴
Nis*_*hal 23
这可以使用jQuery的"last()"函数轻松完成.
$("#tableId").last().append("<tr><td>New row</td></tr>");
小智 17
当表中没有任何行时,我正在使用这种方式,并且每行都非常复杂.
style.css中:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
小智 14
对于此处发布的最佳解决方案,如果最后一行有嵌套表,则新行将添加到嵌套表而不是主表.一个快速的解决方案(考虑带有/不带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>');
Ant*_*vBR 14
我这样解决了.
使用jquery
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>New York</td>
</tr>
</table>小智 13
我遇到了一些相关问题,尝试在单击的行之后插入一个表行.一切都很好,除了.after()调用不适用于最后一行.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
我找到了一个非常不整洁的解决方案:
按如下方式创建表(每行的id):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
等......
然后 :
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Uzb*_*jon 11
您可以使用这个伟大的jQuery添加表行功能.它适用于有<tbody>和没有的表.此外,它还考虑了您上一个表行的colspan.
以下是一个示例用法:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Ric*_*y G 10
我的解决方案
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
用法:
$('#Table').addNewRow(id1);
Pan*_*arg 10
// 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);
尼尔的答案是迄今为止最好的答案.然而,事情变得非常混乱.我的建议是使用变量来存储元素并将它们附加到DOM层次结构中.
HTML
<table id="tableID">
<tbody>
</tbody>
</table>
JAVASCRIPT
// Reference to the table body
var body = $("#tableID").find('tbody');
// Create a new row element
var row = $('<tr>');
// Create a new column element
var column = $('<td>');
// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');
// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
用javascript函数写
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
这是一些hacketi hack代码.我想在HTML页面中维护一个行模板.表行0 ... n在请求时呈现,此示例具有一个硬编码行和一个简化模板行.模板表是隐藏的,行标记必须位于有效表中,否则浏览器可能会将其从DOM树中删除.添加行使用计数器+ 1标识符,并在数据属性中维护当前值.它保证每一行都有唯一的URL参数.
我已经在Internet Explorer 8,Internet Explorer 9,Firefox,Chrome,Opera,Nokia Lumia 800,Nokia C7(使用Symbian 3),Android stock和Firefox beta浏览器上运行测试.
<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th> </th>
</tr>
<tr>
<td nowrap>key1</td>
<td><input type="text" name="property_key1" value="value1" size="70"/></td>
<td class="data_item_options">
<a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
</td>
</tr>
</tbody>
</table>
<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
<td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
<td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
<td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>
- - - -
// add row to html table, read html from row template
function addRow(sTableId) {
// find destination and template tables, find first <tr>
// in template. Wrap inner html around <tr> tags.
// Keep track of counter to give unique field names.
var table = $("#"+sTableId);
var template = $("#"+sTableId+"_rowtemplate");
var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
var id = parseInt(template.data("counter"),10)+1;
template.data("counter", id);
htmlCode = htmlCode.replace(/\${counter}/g, id);
table.find("tbody:last").append(htmlCode);
}
// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
var row = $(childElem).closest("tr"); // find <tr> parent
row.remove();
}
PS:我给jQuery团队所有的学分; 他们应得的一切.没有jQuery的JavaScript编程 - 我甚至不想想那个噩梦.
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
小智 7
我猜我已经完成了我的项目,这里是:
HTML
<div class="container">
<div class = "row">
<div class = "span9">
<div class = "well">
<%= form_for (@replication) do |f| %>
<table>
<tr>
<td>
<%= f.label :SR_NO %>
</td>
<td>
<%= f.text_field :sr_no , :id => "txt_RegionName" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Particular %>
</td>
<td>
<%= f.text_area :particular , :id => "txt_Region" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Unit %>
</td>
<td>
<%= f.text_field :unit ,:id => "txt_Regio" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Required_Quantity %>
</td>
<td>
<%= f.text_field :quantity ,:id => "txt_Regi" %>
</td>
</tr>
<tr>
<td></td>
<td>
<table>
<tr><td>
<input type="button" name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
</td><td><input type="button" name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
</td></tr>
</table>
</td>
</tr>
</table>
<% end %>
<table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
<tr>
<td>SR_NO</td>
<td>Item Name</td>
<td>Particular</td>
<td>Cost</td>
</tr>
</table>
<input type="button" id= "submit" value="Submit Repication" class="btn btn-success" />
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#submit').prop('disabled', true);
$('#btn_AddToList').click(function () {
$('#submit').prop('disabled', true);
var val = $('#txt_RegionName').val();
var val2 = $('#txt_Region').val();
var val3 = $('#txt_Regio').val();
var val4 = $('#txt_Regi').val();
$('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
$('#txt_RegionName').val('').focus();
$('#txt_Region').val('');
$('#txt_Regio').val('');
$('#txt_Regi').val('');
$('#btn_AddToList1').click(function () {
$('#submit').prop('disabled', false).addclass('btn btn-warning');
});
});
});
小智 7
这是我的解决方案
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</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>")
因为我也有一个方法在最后或任何特定的地方添加行所以我想我也应该分享这个:
首先找出长度或行:
var r=$("#content_table").length;
然后使用下面的代码添加你的行:
$("#table_id").eq(r-1).after(row_html);
要在主题上添加一个很好的示例,如果您需要在特定位置添加行,这里是可行的解决方案.
额外的行在第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);
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
将向表的第一个 添加一个新行TBODY,而不依赖于任何THEAD或TFOOT存在.(我没有找到.append()这个行为存在于哪个版本的jQuery的信息.)
您可以在以下示例中尝试:
<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>
在哪个示例a b行中插入行1 2,而不是3 4在第二个示例之后插入.如果表是空的,jQuery会TBODY为新行创建.
如果您正在使用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);
请参阅Datatables fnAddData Datatables API
以一种简单的方式:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</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>上面的答案非常有帮助，但是当学生参考此链接从表单添加数据时，他们通常需要一个样本。
我想贡献一个示例从 from 获取输入并使用.after()string 将 tr 插入到表中interpolation。
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>`);
}
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>`);
}
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>`);
}| 归档时间： |
|
| 查看次数： |
1603295 次 |
| 最近记录： |