Добавить строку таблицы в jQuery

2182

Каков наилучший метод в jQuery для добавления дополнительной строки в таблицу в качестве последней строки?

Это приемлемо?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Существуют ли ограничения на то, что вы можете добавить в таблицу, подобную этой (например, входы, выборки, количество строк)?

  • 2
    Thxs Ash. Я тоже только изучаю jQuery и мне трудно найти лучший способ, особенно простые вещи. Причина в том, что они представляют собой два вопроса, потому что я опубликовал один, а затем почти час спустя я понял, что должен был вставить другой, и не думал, что должен изменить первый.
  • 28
    Из-за этого: google.com/search?q=jquery+add+table+row
Показать ещё 3 комментария
Теги:
html-table

33 ответа

2059
Лучший ответ

Подход, который вы предлагаете, не гарантированно даст вам результат, который вы ищете - что, если у вас был 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>');
  • 139
    Работает ли это, если в таблице нет строк?
  • 6
    @ Рама, нет, не будет. Там должно быть лучшее решение.
Показать ещё 20 комментариев
687

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>.

Это довольно странный отступ, но вам легче увидеть, что происходит в этом примере.

  • 57
    Для тех, кто пытается это сделать, обратите внимание на расположение скобок. Правильное вложение имеет решающее значение.
  • 9
    Как насчет закрывающих тегов? Они не нужны?
Показать ещё 11 комментариев
288

Итак, все изменилось с тех пор, как @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>');
  • 1
    Будьте осторожны с этим предположением. Если ваша добавленная разметка начинается с \ n или \ n \ r, jQuery не обнаружит, что это <tr>, и добавит его в <table>, а не в <tbody>. Я только что столкнулся с этим с разметкой, сгенерированной представлением MVC, в начале которого была дополнительная строка.
  • 0
    @ Мик, спасибо за внимание! Я думаю, yourString.trim() может исправить это.
Показать ещё 4 комментария
150

Что делать, если у вас есть <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>");
  • 10
    Вы неправильно реализовали свой tfoot. Он должен идти перед тем, а не после - см. W3.org/TR/html4/struct/tables.html#h-11.2.3 . Поэтому мое решение по-прежнему работает, если вы не решите нарушить стандарты (в этом случае вы можете ожидать, что другие вещи пойдут не так, как надо). Мое решение также работает независимо от того, есть ли у вас тело или нет, тогда как ваше предложение не будет выполнено, если тело не будет присутствовать.
  • 5
    Несмотря на любые ошибки в <tfoot />, это лучшее решение. Если <tbody /> нет, вы можете использовать ту же технику для самого <table />. Принимая во внимание, что «принятый ответ» требует дополнительной проверки, чтобы видеть, существует ли существующая строка. (Я знаю, что в ОП не было указано это требование, но это не имеет значения - этот пост занимает первое место в поиске Google по этой методике, и лучший ответ - не самый верхний.)
Показать ещё 6 комментариев
57

Я знаю, что вы попросили метод 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>

Я надеюсь, что это помогает.

  • 2
    проблема с этим методом (как я только что узнал) заключается в том, что если у вас есть нижний колонтитул, он добавит ПОСЛЕ нижнего колонтитула с -1 в качестве индекса.
32

Я рекомендую

$('#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>
29

По-моему, самый быстрый и понятный способ -

//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

  • 0
    Если у вас есть несколько tbody вы можете получить несколько вставок
  • 0
    Да, вы можете :) Вы можете попробовать $("SELECTOR").last() чтобы ограничить вашу коллекцию тегов
22

Это можно сделать легко, используя функцию "last()" jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");
  • 9
    Хорошая идея, но я думаю, что вы захотите изменить селектор на #tableId tr, так как прямо сейчас вы получите таблицу, добавив строку под таблицей.
17

Я использую этот способ, когда в таблице нет какой-либо строки, а также каждая строка довольно сложна.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...
  • 0
    Спасибо. Это очень элегантное решение. Мне нравится, как он держит шаблон в сетке. Это делает код намного проще и легче для чтения и обслуживания. Еще раз спасибо.
14

Для лучшего решения, размещенного здесь, если в последней строке есть вложенная таблица, новая строка будет добавлена ​​во вложенную таблицу вместо основной таблицы. Быстрое решение (с учетом таблиц с/без 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>');
13

У меня были некоторые связанные проблемы, пытаясь вставить строку таблицы после щелкнутой строки. Все отлично, за исключением того, что вызов .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);
  • 0
    HTML отсутствует <tr id = "row1"> </ tr> <tr id = "row2"> </ tr> и т. Д.
  • 0
    Я думаю, что это должен быть новый вопрос, а не ответ на существующий ...
11

Я решил это таким образом.

Использование 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>
  • 0
    Теперь я могу успешно добавить динамические данные в новую строку, но после использования этого метода мой настраиваемый фильтр не работает .. У вас есть какое-либо решение для этого? Спасибо
  • 0
    Я думаю, что вам нужно вызвать функцию обновления какого-то рода. Пришлось рассказать без примера.
10
    // 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);
  • 0
    Хотя это может быть ответом, это не очень полезно для посетителя позже ... Пожалуйста, добавьте некоторые объяснения вокруг вашего ответа.
10

Мое решение:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

использование:

$('#Table').addNewRow(id1);
  • 0
    так что, если в таблице нет tbody .. ?? означает, что может быть строка непосредственно внутри элемента <table> , даже если без заголовка.
  • 0
    Я настоятельно рекомендую использовать разметку с <TBody>, чтобы она соответствовала стандартам HTML 5, если нет, то вы всегда можете сделать $ (this) .append ('<tr id = "' + rowId + '"> </ тр> '); это просто добавляет строку в таблицу.
Показать ещё 1 комментарий
10

Вы можете использовать эту замечательную функцию jQuery add table row. Он отлично работает с таблицами с <tbody>, а это не так. Также он учитывает кол-во последних строк таблицы.

Вот пример использования:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
  • 0
    Я не вижу, чтобы это было ужасно полезно. Все, что он делает, это добавляет пустую строку таблицы в таблицу. Обычно, если не всегда, вы хотите добавить новую строку таблицы с некоторыми данными в ней.
  • 1
    Но обычно это то, что вы хотите. Эта функция позволяет добавлять пустую строку в любую из ваших таблиц, независимо от того, сколько у вас столбцов и интервалов строк, что делает ее функцией UNIVERSAL. Оттуда вы можете продолжить, например, с помощью $ ('. Tbl tr: last td'). Весь смысл в том, чтобы иметь универсальную функцию !!!
Показать ещё 2 комментария
9

Ответ Нила, безусловно, самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию 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);
8

Я нашел этот AddRow plugin весьма полезным для управления строками таблицы. Хотя решение Luke было бы лучше всего подходит, если вам просто нужно добавить новую строку.

7
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Запись с помощью функции javascript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
7

Я думаю, что сделал в моем проекте, вот он:

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');
    });
      });
});
7
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
7

Вот какой хаккетский код взлома. Я хотел сохранить шаблон строки на странице HTML. Строки таблицы 0... n отображаются во время запроса, и этот пример имеет одну строку жесткого кодирования и упрощенную строку шаблона. Таблица шаблонов скрыта, и тег строки должен находиться в допустимой таблице, или браузеры могут удалить его из дерева DOM. Добавление строки использует идентификатор counter + 1, а текущее значение сохраняется в атрибуте данных. Он гарантирует, что каждая строка получает уникальные параметры URL.

Я провел тесты в Internet Explorer 8, Internet 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7Symbian 3), акции Android и Firefox бета-версии.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</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 - я даже не хочу думать об этом кошмаре.

6

если у вас есть другая переменная, доступ к которой вы можете получить в теге <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);
6

Чтобы добавить хороший пример в эту тему, вот работающее решение, если вам нужно добавить строку в определенную позицию.

Дополнительная строка добавляется после 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>
6

Как у меня также есть способ добавить строку наконец или в какое-то конкретное место, поэтому я думаю, что я должен также поделиться этим:

Сначала найдите длину или строки:

var r=$("#content_table").length;

а затем используйте код ниже, чтобы добавить строку:

$("#table_id").eq(r-1).after(row_html);
6
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Вы можете кэшировать переменную нижнего колонтитула и уменьшить доступ к DOM (Примечание: может быть, лучше использовать поддельную строку вместо нижнего колонтитула).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
5

Это мое решение

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
5

Простым способом:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
  • 0
    Не могли бы вы более подробно изложить свой ответ, добавив немного больше описания предлагаемого вами решения?
5

Если вы используете плагин 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

5
$('#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 для новой строки.

4

Если вы хотите добавить 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>");
0

Добавьте строку табуляции с помощью JQuery:

если вы хотите добавить строку после последней дочерней строки таблицы, вы можете попробовать это

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

если вы хотите добавить строку 1-й в дочерней строке таблицы, вы можете попробовать это

$('#myTable').after('<tr>...</tr><tr>...</tr>');
0

СОВЕТ: Вставка строк в 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);
0

Это также можно сделать:

$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
  • 0
    Это кажется довольно сложным и, возможно, еще более медленным для браузера / JS, так как он должен анализировать намного больше HTML.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню