Каков наилучший метод в jQuery для добавления дополнительной строки в таблицу в качестве последней строки?
Это приемлемо?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Существуют ли ограничения на то, что вы можете добавить в таблицу, подобную этой (например, входы, выборки, количество строк)?
Подход, который вы предлагаете, не гарантированно даст вам результат, который вы ищете - что, если у вас был 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 всегда будет tbody
; это верно, но только если есть хотя бы одна строка. Если у вас нет строк, не будет tbody
, если вы сами не указали.
DaRKoN_ предлагает добавить к tbody
вместо добавления контента после последнего tr
. Это затрагивает проблему отсутствия строк, но все же не является пуленепробиваемым, поскольку теоретически вы можете иметь несколько элементов tbody
, и строка будет добавлена к каждому из них.
Взвесив все, я не уверен, что есть одно однострочное решение, которое учитывает каждый возможный сценарий. Вам нужно будет убедиться, что код jQuery соответствует вашей разметке.
Я думаю, что самым безопасным решением, вероятно, является обеспечение того, чтобы ваш table
всегда включал по крайней мере один 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')
)
)
);
Объект $('<some-tag>')
в jQuery - это объект тега, который может иметь несколько атрибутов attr
, которые можно установить и получить, а также text
, который представляет текст между тегом здесь: <tag>text</tag>
.
Это довольно странный отступ, но вам легче увидеть, что происходит в этом примере.
Итак, все изменилось с тех пор, как @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>');
yourString.trim()
может исправить это.
Что делать, если у вас есть <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>");
Я знаю, что вы попросили метод jQuery. Я много смотрел и обнаружил, что мы можем сделать это лучше, чем напрямую использовать JavaScript с помощью следующей функции.
tableObject.insertRow(index)
index
- это целое число, которое указывает позицию строки для вставки (начинается с 0). Также можно использовать значение -1; в результате чего новая строка будет вставлена в последнюю позицию.
Этот параметр является обязательным в Firefox и Opera, но не является обязательным в Internet Explorer, Chrome и Safari.
Если этот параметр не insertRow()
, 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>
Я надеюсь, что это помогает.
Я рекомендую
$('#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>
По-моему, самый быстрый и понятный способ -
//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>');
здесь есть демонстрация Fiddle
Также я могу порекомендовать небольшую функцию, чтобы сделать больше изменений 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'
}));
Вот демонстрация Fiddle
tbody
вы можете получить несколько вставок
$("SELECTOR").last()
чтобы ограничить вашу коллекцию тегов
Это можно сделать легко, используя функцию "last()" jQuery.
$("#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() );
...
Для лучшего решения, размещенного здесь, если в последней строке есть вложенная таблица, новая строка будет добавлена во вложенную таблицу вместо основной таблицы. Быстрое решение (с учетом таблиц с/без 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>');
У меня были некоторые связанные проблемы, пытаясь вставить строку таблицы после щелкнутой строки. Все отлично, за исключением того, что вызов .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);
Я решил это таким образом.
Использование 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="/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>
// 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);
Мое решение:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
использование:
$('#Table').addNewRow(id1);
tbody
.. ?? означает, что может быть строка непосредственно внутри элемента <table>
, даже если без заголовка.
Вы можете использовать эту замечательную функцию jQuery add table row. Он отлично работает с таблицами с <tbody>
, а это не так. Также он учитывает кол-во последних строк таблицы.
Вот пример использования:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Ответ Нила, безусловно, самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию 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 plugin весьма полезным для управления строками таблицы. Хотя решение Luke было бы лучше всего подходит, если вам просто нужно добавить новую строку.
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Запись с помощью функции javascript
document.getElementById("myTable").insertRow(-1).innerHTML = '<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');
});
});
});
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Вот какой хаккетский код взлома. Я хотел сохранить шаблон строки на странице HTML. Строки таблицы 0... n отображаются во время запроса, и этот пример имеет одну строку жесткого кодирования и упрощенную строку шаблона. Таблица шаблонов скрыта, и тег строки должен находиться в допустимой таблице, или браузеры могут удалить его из дерева DOM. Добавление строки использует идентификатор counter + 1, а текущее значение сохраняется в атрибуте данных. Он гарантирует, что каждая строка получает уникальные параметры URL.
Я провел тесты в Internet Explorer 8, Internet 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (с Symbian 3), акции Android и Firefox бета-версии.
<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; они заслуживают всего. Программирование JavaScript без jQuery - я даже не хочу думать об этом кошмаре.
если у вас есть другая переменная, доступ к которой вы можете получить в теге <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);
Чтобы добавить хороший пример в эту тему, вот работающее решение, если вам нужно добавить строку в определенную позицию.
Дополнительная строка добавляется после 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>
Как у меня также есть способ добавить строку наконец или в какое-то конкретное место, поэтому я думаю, что я должен также поделиться этим:
Сначала найдите длину или строки:
var r=$("#content_table").length;
а затем используйте код ниже, чтобы добавить строку:
$("#table_id").eq(r-1).after(row_html);
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
Вы можете кэшировать переменную нижнего колонтитула и уменьшить доступ к DOM (Примечание: может быть, лучше использовать поддельную строку вместо нижнего колонтитула).
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Это мое решение
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Простым способом:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</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
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
добавит новую строку в first 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>
В каком примере строка a b
вставлена после 1 2
, а не после 3 4
во втором примере. Если таблица была пустой, jQuery создает TBODY
для новой строки.
Если вы хотите добавить row
перед первым дочерним элементом <tr>
.
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
Если вы хотите добавить row
после <tr>
последнего ребенка.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
Добавьте строку табуляции с помощью JQuery:
если вы хотите добавить строку после последней дочерней строки таблицы, вы можете попробовать это
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
если вы хотите добавить строку 1-й в дочерней строке таблицы, вы можете попробовать это
$('#myTable').after('<tr>...</tr><tr>...</tr>');
СОВЕТ: Вставка строк в html table
помощью innerHTML or.html()
недопустима в некоторых браузерах (аналог IE9
), а использование .append("<tr></tr>")
не является хорошим предложением в любом браузере. Лучший и самый быстрый способ - использовать pure javascript
коды pure javascript
.
для объединения таким образом с jQuery
, только добавьте новый плагин, похожий на этот jQuery
:
$.fn.addRow=function(index/*-1: add to end or any desired index*/, cellsCount/*optional*/){
if(this[0].tagName.toLowerCase()!="table") return null;
var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
return $(r);
};
А теперь используйте весь проект, подобный этому:
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);
Это также можно сделать:
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")