Каков наилучший метод в 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>');
Что делать, если у вас есть <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() вставляет новую строку в последнюю позицию в 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
Это можно сделать легко, используя функцию "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>');
Я решил это таким образом.
Использование 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>У меня были некоторые связанные проблемы, пытаясь вставить строку таблицы после щелкнутой строки. Все отлично, за исключением того, что вызов .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 add table row. Он отлично работает с таблицами с <tbody>, а это не так. Также он учитывает кол-во последних строк таблицы.
Вот пример использования:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Мое решение:
//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);
Я нашел этот AddRow plugin весьма полезным для управления строками таблицы. Хотя решение Luke было бы лучше всего подходит, если вам просто нужно добавить новую строку.
Ответ Нила, безусловно, самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию 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>';
Вот какой хаккетский код взлома. Я хотел сохранить шаблон строки на странице 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 - я даже не хочу думать об этом кошмаре.
<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');
});
});
});
Это мое решение
$('#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>');
добавит новую строку в 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 для новой строки.
Если вы используете плагин 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>