Какой лучший метод в 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, включая несколько строк, как в примере выше.
Обновление: Пересмотр этого ответа после недавней активности с этим вопросом. eyelidlessness делает хороший комментарий, что в 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>');
Что если у вас есть <тело>
и <нога>
?
Например:
<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)
индекс-целое число, задающее позицию вставляемую строку (начинается с 0). Значение -1 может быть также использована; какой результат в том, что новая строка будет вставлена в последней позиции.
Этот параметр является обязательным в Firefox и Опера, но это необязательно, в интернет обозревателе хром и сафари.
Если этот параметр опущен, метод insertrow()
вставка новой строки в последней позиции в Сети&ампер;усилитель; nbsp;обозревателя и на первой позиции в 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>');
В первых
и последних
ключевые слова работа на первом или последнем теге должен быть запущен, не закрытые. Таким образом, это играет приятнее с вложенными таблицами, если вы не'т хотим, чтобы вложенная таблица должна быть изменена, но вместо того, чтобы добавить в общую таблицу. По крайней мере, это то, что я нашел.
<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>');
вот демо [Скрипка][1]
Также могу порекомендовать небольшую функцию для того чтобы сделать более 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'
}));
Вот демо [Скрипка][2]
Я'м, используя этот способ, когда нет ни какой строки в таблице, а также, каждая строка является достаточно сложной.
стиль.Усс:
...
#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>
в
Я был возникли некоторые вопросы, пытаюсь вставить строку в таблице после того, как в выбранной строке. Все нормально, кроме .после() не работает для последней строки.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Я приземлился с очень неопрятно решение:
создать таблицу следующим образом (идентификатор для каждой строки):
<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>
и которые не имеют. Также она учитывает colspan последней строки таблицы.
Вот пример использования:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
// 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);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Написать функцию JavaScript
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
Я нашел это плагин метода addrow весьма полезны для управления строками таблицы. Хотя, Луки'ы решение будет наилучшим образом подходит, если вам просто нужно добавить новую строку.
Нил'ы ответ на сегодняшний день является лучшим. Однако все становится грязным очень быстро. Мое предложение было бы использовать переменные для хранения элементов и добавить их в иерархии 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);
Я думаю, что я сделал в мой проект , вот он:
в формате 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>
Яш
$(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>');