Каков наилучший метод в jQuery для добавления дополнительной строки в таблицу в качестве последней строки?
Это приемлемо?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Существуют ли ограничения на то, что вы можете добавить в такую таблицу (например, входные данные, выборки, количество строк)?
Из-за этого: google.com/search?q=jquery+add+table+row
К вашему сведению - избегайте использования нескольких добавлений (значительно снижает производительность), лучше наращивайте свою строку или используйте соединение JavaScript, которое намного быстрее.
см .: stackoverflow.com/a/50365764/7186739
На всякий случай, если строка слишком сложная, я делаю следующее: сохраняю первую строку скрытой с требуемой структурой, делаю клон и изменяю текст и вставляю после первой строки, таким образом, если вы извлекаете данные из ответа ajax, ваша таблица будет создана, помните клонируйте его вне цикла, а затем используйте его для изменения содержимого внутри цикла. $ ("# mainTable tbody"). append (строка); строка - это модифицированная копия клона :)
Предлагаемый вами подход не гарантирует получения желаемого результата - что, если бы у вас был 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>');
Что, если бы у вас были <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 добавить строку таблицы. Он отлично работает с таблицами, у которых есть <tbody>
, а у которых нет. Также он принимает во внимание colspan вашей последней строки таблицы.
Вот пример использования:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Я не вижу, чтобы это было очень полезно. Все, что он делает, это добавляет в таблицу пустую строку. Обычно, если не всегда, вы хотите добавить новую строку таблицы с некоторыми данными в ней.
Но обычно это то, чего вы хотите. Эта функция позволяет вам добавлять пустую строку в любую из ваших таблиц, независимо от того, сколько столбцов и интервалов строк у вас есть, что делает ее УНИВЕРСАЛЬНОЙ функцией. Вы можете продолжить оттуда, например, с помощью $ ('. Tbl tr: last td'). Все дело в универсальности !!!
Если ваша функция также добавляет данные в ваши новые строки, вы не сможете использовать их в следующий раз в своем следующем проекте. Какой в этом смысл ?! Хотя, на мой взгляд, вам не нужно делиться этим ...
Если вы предлагаете функцию, которая не является частью общего пакета, пожалуйста, поместите здесь полный код функции. Спасибо.
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>
.
Это довольно странный отступ, но вам легче увидеть, что происходит в этом примере.
У меня возникли некоторые связанные проблемы, когда я пытался вставить строку таблицы после выбранной строки. Все в порядке, за исключением того, что вызов .after () не работает для последней строки.
$('#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 "last ()".
$("#tableId").last().append("<tr><td>New row</td></tr>");
Хорошая идея, но я думаю, вы захотите изменить селектор на #tableId tr, так как прямо сейчас вы должны добавить в таблицу строку под таблицей.
рекомендую
$('#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>
Я использую этот способ, когда в таблице нет ни одной строки, а также каждая строка довольно сложная.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id = "templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Спасибо. Это очень элегантное решение. Мне нравится, как он сохраняет шаблон в сетке. Это делает код намного проще, его легче читать и поддерживать. Еще раз спасибо.
Для лучшего решения, размещенного здесь, если в последней строке есть вложенная таблица, новая строка будет добавлена во вложенную таблицу вместо основной. Быстрое решение (с учетом таблиц с / без тела и таблиц с вложенными таблицами):
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>');
Я нашел этот Плагин AddRow весьма полезным для управления строками таблицы. Тем не менее, решение Люка лучше всего подойдет, если вам просто нужно добавить новую строку.
Мое решение:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id = "' + rowId + '"> </tr>');
};
использование:
$('#Table').addNewRow(id1);
ну и что, если в таблице нет tbody
.. ?? означает, что внутри элемента <table>
может быть строка, даже если без заголовка.
Я настоятельно рекомендую вам иметь разметку с помощью <TBody>, чтобы она соответствовала стандартам HTML 5, если нет, вы всегда можете сделать $ (this) .append ('<tr id = "' + rowId + '"> </ tr> '); это просто добавляет строку в таблицу.
Я думаю, если вы собираетесь сделать это функцией, вы могли бы, возможно, вернуть объект jQuery для новой строки, чтобы его можно было объединить в цепочку.
<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>my data</td><td>more data</td></tr>');
добавит новую строку в первый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
для новой строки.
Я знаю, что вы просили метод jQuery. Я много посмотрел и обнаружил, что мы можем сделать это лучше, чем использование JavaScript напрямую с помощью следующей функции.
tableObject.insertRow(index)
index
- целое число, указывающее позицию вставляемой строки (начинается с 0). Также можно использовать значение -1; в результате новая строка будет вставлена в последнюю позицию.
Этот параметр является обязательным в Firefox и Опера, но не является обязательным в Internet Explorer, Хром и Сафари.
Если этот параметр опущен, 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>
Я надеюсь, что это помогает.
Итак, все изменилось с тех пор, как @ Люк Беннетт ответил на этот вопрос. Вот обновление.
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>');
Вот код взлома hacketi. Я хотел сохранить шаблон строки на странице HTML. Строки таблицы 0 ... n отображаются во время запроса, и в этом примере есть одна жестко запрограммированная строка и упрощенная строка шаблона. Таблица шаблона скрыта, и тег строки должен находиться в допустимой таблице, иначе браузеры могут удалить ее из дерева ДОМ. При добавлении строки используется идентификатор counter + 1, а текущее значение сохраняется в атрибуте данных. Это гарантирует, что каждая строка получит уникальные параметры URL.
Я проводил тесты в Internet Explorer 8, Internet Explorer 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 - я даже не хочу думать об этом кошмаре.
Поскольку у меня также есть способ добавить наконец строку или любое конкретное место, поэтому я думаю, что мне также следует поделиться этим:
Сначала узнайте длину или ряды:
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>
Если вы используете плагин 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);
Обратитесь к таблицам данных fnAddData Datatables API
<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');
});
});
});
Ответ Нила - безусловно, лучший. Однако очень быстро все становится беспорядочно. Я предлагаю использовать переменные для хранения элементов и добавлять их в иерархию 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);
На мой взгляд, самый быстрый и понятный способ - это
//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'
}));
Вот демо Скрипка
Если у вас несколько tbody
, вы можете получить несколько вставок
Да, вы можете :) Вы можете попробовать $("SELECTOR").last()
, чтобы ограничить коллекцию тегов
Простым способом:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
Не могли бы вы подробнее рассказать о своем ответе, добавив еще немного описания предлагаемого вами решения?
// 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>';
если у вас есть другая переменная, вы можете получить доступ в теге <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);
Если вы хотите добавить 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>");
Это также можно было сделать:
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
Это кажется довольно сложным и, возможно, даже медленнее для браузера / JS, поскольку ему нужно анализировать намного больше HTML.
Это мое решение
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</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>
Теперь я могу успешно добавить динамические данные в новую строку, но после использования этого метода мой собственный фильтр не работает. У вас есть какое-нибудь решение для этого? Спасибо
Я думаю, вам нужно вызвать какую-то функцию обновления. Пришлось рассказать без примера.
СОВЕТ: Вставка строк в html table
через innerHTML or .html()
недопустима в некоторых браузерах (аналогично IE9
), а использование .append("<tr></tr>")
не является хорошим предложением в любом браузере. Лучший и самый быстрый используют коды 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);
Добавьте строку tabe с помощью JQuery:
если вы хотите добавить строку после последней дочерней строки таблицы, вы можете попробовать это
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
если вы хотите добавить строку 1-й дочерний элемент строки таблицы, вы можете попробовать это
$('#myTable tr').after('<tr>...</tr><tr>...</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>
Приведенные выше ответы очень полезны, но когда студент ссылается на эту ссылку, чтобы добавить данные из формы, им часто требуется образец.
Я хочу внести образец получения входных данных и использования .after()
для вставки 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>`);
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick = "add()" value = "Add new" />
</form>
<table id='student'>
<thead>
<th>Name</th>
<th>Mark</th>
</thead>
</table>
</body>
</html>
Чтобы добавить новую строку в последнюю из текущей строки, вы можете использовать вот так
$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>');
Вы можете добавить несколько строк, как указано выше. Также вы можете добавить внутренние данные, например
$('#yourtableid tr:last').after('<tr><td>your data</td></tr>');
по-другому вы можете сделать это
let table = document.getElementById("tableId");
let row = table.insertRow(1); // pass position where you want to add a new row
//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);
//add value to added td cell
cell0.innerHTML = "your td content here";
cell1.innerHTML = "your td content here";
cell2.innerHTML = "your td content here";
cell3.innerHTML = "your td content here";
Здесь вы можете просто нажать кнопку, и вы получите результат. Когда вы нажимаете кнопку Добавить ряд, добавляется еще одна строка.
Надеюсь, это очень поможет.
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
table {
margin: 25px 0;
width: 200px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<b>Add table row in jQuery</b>
<p>
Click on the button below to
add a row to the table
</p>
<button class = "add-row">
Add row
</button>
<table>
<thead>
<tr>
<th>Rows</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is row 0</td>
</tr>
</tbody>
</table>
<!-- Script to add table row -->
<script>
let rowno = 1;
$(document).ready(function () {
$(".add-row").click(function () {
rows = "<tr><td>This is row "
+ rowno + "</td></tr>";
tableBody = $("table tbody");
tableBody.append(rows);
rowno++;
});
});
</script>
</body>
</html>
Чистый JS довольно короткий в вашем случае
myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>'
function add() {
myTable.firstChild.innerHTML+=`<tr><td>date</td><td>${+new Date}</td></tr>`
}
td {border: 1px solid black;}
<button onclick = "add()">Add</button><br>
<table id = "myTable"><tbody></tbody> </table>
(если мы удалим <tbody>
и firstChild
, он также будет работать, но каждая строка будет заключена в <tbody>
)
Я попробовал самый популярный вариант, но у меня он не сработал, но ниже работает хорошо.
$('#mytable tr').last().after('<tr><td></td></tr>');
Что будет работать, даже если там есть тобди.
) Дэрил:
Вы можете добавить его к телу, используя метод appendTo следующим образом:
$(() => {
$("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});
Вероятно, вы захотите использовать последнюю версию JQuery и ECMAScript. Затем вы можете использовать серверный язык для добавления данных в таблицу. Вы также можете заключить его в такую переменную:
$(() => {
var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
t_data.appendTo('tbody');
});
Спасибо Ash. Я тоже только изучаю jQuery и мне трудно найти лучший способ, особенно простые вещи. Причина, по которой они представляют собой 2 вопроса, заключается в том, что я опубликовал один, а затем почти через час я понял, что должен был вставить другой, и не думал, что должен менять первый.