在jQuery中添加表格行
jQuery中最好的方法是将最后一行添加到表中作为最后一行？
这可以接受吗？
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 是否有限制，你可以添加到这样的表（如input，select，行数）？
你build议的方法不能保证给你你要找的结果 – 例如，如果你有一个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，包括上面例子中的多行。
更新：在这个问题最近的活动后重温这个答案。 无暇的眼神使得一个很好的评论，DOM中总是会有一个人; 这是真的，但只有至less有一行。 如果你没有行，除非你自己指定了行，否则没有行。
DaRKoN_ build议附加到tbody而不是在最后一个tr之后添加内容。 这样可以解决没有行的问题，但是仍然不是无懈可击的，因为理论上你可以有多个tbody元素，行会被添加到每个元素中。
把所有东西称重，我不确定是否有单一的解决scheme来解决每一种可能的情况。 您将需要确保jQuery代码符合您的标记。
我认为最安全的解决scheme可能是确保你的table总是在你的标记中包含至less一个tbody ，即使它没有行。 在这个基础上，你可以使用下面的方法，但是你可以使用很多行（并且也包含多个tbody元素）：
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
jQuery有一个内置的工具来即时操作DOM元素。
你可以添加任何东西到你的表中，像这样：
$("#tableID").find('tbody') .append($('<tr>') .append($('<td>') .append($('<img>') .attr('src', 'img.png') .text('Image cell') ) ) );
jQuery中的$('<some-tag>')是一个标签对象，它可以包含几个可以设置和获取的attr属性，以及表示标签之间text的文本： <tag>text</tag> 。
这是一些非常奇怪的缩进，但是在这个例子中，更容易看到发生了什么。
所以@Luke Bennett回答了这个问题，事情就发生了改变。 这是一个更新。
从版本1.4（？）jQuery自动检测你试图插入的元素（使用任何append() ， prepend() ， before()或after()方法）是否是一个<tr>并将其插入到第一个<tbody>放在你的表中，如果不存在的话，将它包装成一个新的<tbody> 。
所以是的，你的示例代码是可以接受的，并且可以和jQuery 1.4+一起使用。 ;）
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
如果你有一个<tbody>和一个<tfoot> ？
如：
<table> <tbody> <tr><td>Foo</td></tr> </tbody> <tfoot> <tr><td>footer information</td></tr> </tfoot> </table>
然后它会插入你的新行在页脚 – 而不是身体。
因此，最好的解决scheme是包含一个<tbody>标签并使用.append ，而不是.after 。
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
我知道你已经要求一个jQuery方法。 我看了很多，发现我们可以用比以下函数直接使用JavaScript更好的方式来做到这一点。
tableObject.insertRow(index)
index是一个整数，指定要插入的行的位置（从0开始）。 -1的值也可以使用; 这导致新行将被插入到最后的位置。
此参数在Firefox和Opera中是必需的，但在Internet Explorer， Chrome和Safari中是可选的。
如果省略此参数，则insertRow()在Internet Explorer的最后一个位置插入新行，并在Chrome和Safari的第一个位置插入新行。
它将适用于HTML表格的每个可接受的结构。
以下示例将在最后插入一行（-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>
我希望它有帮助。
我build议
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
而不是
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
第first和last关键字在第一个或最后一个标签last起作用，而不是closures。 因此，如果不希望嵌套表被更改，而是添加到整个表中，则这对嵌套表起到更好的作用。 至less，这是我发现的。
<table id=myTable> <tbody id=first> <tr><td> <table id=myNestedTable> <tbody id=last> </tbody> </table> </td></tr> </tbody> </table>
在我看来，最快和最清晰的方式是
//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] : ''; }); } }());
如果你使用我的弦乐composer php，你可以这样做
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' }));
这里是演示小提琴
这可以使用jQuery的“last（）”function轻松完成。
$("#tableId").last().append("<tr><td>New row</td></tr>");
当表中没有任何行时，我使用这种方式，每一行都很复杂。
style.css中：
... #templateRow { display:none; } ...
xxx.html
... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ...
我遇到了一些相关的问题，试图在点击行之后插入一个表格行。 除了.after（）调用不适用于最后一行外，一切正常。
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
我遇到了一个非常不整洁的解决scheme：
按如下所示创build表（每行的id）：
<tr id="row1"> ... </tr> <tr id="row2"> ... </tr> <tr id="row3"> ... </tr>
等等
接着 ：
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
为了在这里发布最好的解决scheme，如果最后一行有一个嵌套表，新行将被添加到嵌套表而不是主表。 一个快速的解决scheme（考虑带/不带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>');
你可以使用这个很棒的jQuery添加表格行函数。 它适用于拥有<tbody>而没有的表。 另外它也考虑到你最后一个表格列的colspan。
以下是一个示例用法：
// One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables'));
我的解决scheme
//Adds a new table row $.fn.addNewRow = function (rowId) { $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>'); };
用法：
$('#Table').addNewRow(id1);
// 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);
尼尔的答案是迄今为止最好的答案 。 然而事情变得非常麻烦。 我的build议是使用variables来存储元素并将它们追加到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);
我发现这个AddRow插件对于pipe理表格行非常有用。 虽然如果你只需要添加一个新的行，卢克的解决scheme将是最合适的。
这是一些hacketi破解代码。 我想在HTML页面中保留一个行模板。 表行0 … n在请求时被渲染，这个例子有一个硬编码的行和一个简化的模板行。 模板表是隐藏的，行标记必须位于有效表内，否则浏览器可能会将其从DOM树中删除。 添加一行使用计数器+1标识符，并且当前值在数据属性中维护。 它保证每一行获得唯一的URL参数。
我已经在Internet Explorer 8，Internet Explorer 9，Firefox，Chrome，Opera， Nokia Lumia 800 ， Nokia C7 （与Symbian 3），Android股票以及Firefox beta版浏览器上运行testing。
<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>');
我猜我已经完成了我的项目，这里是：
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'); }); }); });
<table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table>
用javascript函数写
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
将添加一个新的行到表的第一个 TBODY ，而不依赖于任何THEAD或TFOOT目前。 （我没有find从哪个版本的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>
其中ab行在1 2之后插入，而第二个例子中不在3 4之后。 如果表是空的，jQuery为新行创buildTBODY 。
因为我也有办法在最后或任何特定的地方添加行，所以我想我也应该分享一下：
首先找出长度或行数：
var r=$("#content_table").length;
然后使用下面的代码来添加你的行：
$("#table_id").eq(r-1).after(row_html);
要在主题上添加一个很好的例子，如果您需要在特定的位置添加一行，这里是工作的解决scheme。
额外的行被添加到第5行之后，或者如果less于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); }
我把内容放在桌子下面的一个准备好的（隐藏的）容器中。如果你（或者devise者）必须改变它，不需要编辑JS。
<table id="banner_holder" style="display:none;"> <tr> <td colspan="3"> <div class="wide-banner"></div> </td> </tr> </table>
<table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table>
您可以caching页脚variables并减less对DOM的访问（注意：可能是使用假行而不是页脚）。
var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>")
如果你正在使用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>');
如果你有另一个variables，你可以像<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);
这是我的解决scheme
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
如果要在<tr>第一个孩子之前添加row 。
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
如果你想在<tr>最后一个孩子之后添加row 。
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
这也可以这样做：
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
