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

Question

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

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

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

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

Answer 1

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

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

Answer 2

Вот некоторый хакетский хак код. Я хотел сохранить шаблон строки на странице HTML . Строки таблицы 0 ... n отображаются во время запроса, и в этом примере есть одна жестко закодированная строка и упрощенная строка шаблона. Таблица шаблонов скрыта, и тег строки должен находиться в допустимой таблице, иначе браузеры могут удалить его из дерева DOM . При добавлении строки используется идентификатор счетчика + 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>&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 - я даже не хочу думать об этом кошмаре.

Answer 3

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

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

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

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

$("#table_id").eq(r-1).after(row_html);

Answer 4

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

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

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

Answer 5

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

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

Answer 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);

Answer 7

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

Answer 8

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

Answer 9

По-простому:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Answer 10

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