Dodaj wiersz tabeli w jQuery

Jaka jest najlepsza metoda w jQuery, aby dodać dodatkowy wiersz do tabeli jako ostatni wiersz?

Czy to jest dopuszczalne?

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

Czy istnieją ograniczenia dotyczące tego, co można dodać do takiej tabeli (takie jak dane wejściowe, selekcje, liczba wierszy)?

Podejście, które sugerujesz, nie gwarantuje uzyskania oczekiwanego rezultatu - co jeśli tbodyna przykład:

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

Skończyłoby się z następującymi:

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

Dlatego zamiast tego poleciłbym to podejście:

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

W after()metodzie można uwzględnić wszystko, o ile jest to poprawny kod HTML, w tym wiele wierszy zgodnie z powyższym przykładem.

Aktualizacja: ponowne sprawdzenie tej odpowiedzi po ostatniej aktywności związanej z tym pytaniem. brak powiek jest dobrym komentarzem, że zawsze będzie tbodyw DOM; jest to prawda, ale tylko jeśli jest co najmniej jeden wiersz. Jeśli nie masz wierszy, nie będzie, tbodychyba że sam określisz jeden.

DaRKoN_ sugeruje dołączanie do tbodytreści zamiast dodawania treści po ostatnim tr. Rozwiązuje to problem braku wierszy, ale nadal nie jest kuloodporny, ponieważ teoretycznie można mieć wiele tbodyelementów, a wiersz zostanie dodany do każdego z nich.

Biorąc pod uwagę wszystko, nie jestem pewien, czy istnieje jedno jednowierszowe rozwiązanie, które uwzględnia każdy możliwy scenariusz. Musisz upewnić się, że kod jQuery zgadza się ze znacznikami.

Myślę, że najbezpieczniejszym rozwiązaniem jest zapewnienie, aby tablezawsze zawierałeś przynajmniej jeden tbodyze znaczników, nawet jeśli nie ma żadnych wierszy. Na tej podstawie możesz użyć następujących opcji, które będą działać bez względu na liczbę posiadanych wierszy (a także uwzględniać wiele tbodyelementów):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

jQuery ma wbudowane narzędzie do manipulowania elementami DOM w locie.

Możesz dodać wszystko do swojego stołu w następujący sposób:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

$('<some-tag>')Rzeczą w jQuery jest obiekt tag, który może mieć kilka attratrybutów, które można ustawiać i uzyskać, a także text, co stanowi tekst pomiędzy znacznikiem tutaj: <tag>text</tag>.

To trochę dziwne wcięcie, ale łatwiej jest zobaczyć, co się dzieje w tym przykładzie.

Więc rzeczy się zmieniły od czasu @Luke Bennett odpowiedział na to pytanie. Oto aktualizacja.

jQuery od wersji 1.4 (?) automatycznie wykrywa, czy element próbujesz wstawić (za pomocą dowolnego z append(), prepend(), before()lub after()metod) jest <tr>i wstawia go do pierwszego <tbody>w tabeli lub zawija je w nowy <tbody>, jeśli nie istnieć.

Więc tak, twój przykładowy kod jest akceptowalny i będzie działał dobrze z jQuery 1.4+. ;)

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

Co jeśli masz A <tbody>i A <tfoot>?

Jak na przykład:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Następnie wstawiłby nowy wiersz w stopce - nie do ciała.

Dlatego najlepszym rozwiązaniem jest dodanie <tbody>tagu i użycie .append, a nie .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Wiem, że poprosiłeś o metodę jQuery. Szukałem dużo i stwierdziłem, że możemy to zrobić lepiej niż przy użyciu JavaScript bezpośrednio przez następującą funkcję.

tableObject.insertRow(index)

indexjest liczbą całkowitą, która określa pozycję wiersza do wstawienia (zaczyna się od 0). Można również użyć wartości -1; co powoduje, że nowy wiersz zostanie wstawiony w ostatniej pozycji.

Ten parametr jest wymagany w Firefox i Opera , ale jest opcjonalny w Internet Explorer, Chrome i Safari .

Jeśli ten parametr zostanie pominięty, insertRow()wstawia nowy wiersz na ostatniej pozycji w Internet Explorerze i na pierwszej pozycji w Chrome i Safari.

Będzie działać dla każdej akceptowalnej struktury tabeli HTML.

Poniższy przykład wstawi wiersz na końcu (-1 służy jako indeks):

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

Mam nadzieję, że to pomoże.

polecam

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

w przeciwieństwie do

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

firstI lastsłowa kluczowe prace na pierwszej lub ostatniej tagu być uruchomiony, nie zamknięta. Dlatego gra się lepiej z tabelami zagnieżdżonymi, jeśli nie chcesz, aby tabela zagnieżdżona była zmieniana, ale zamiast tego dodaj do tabeli ogólnej. Przynajmniej to znalazłem.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

Moim zdaniem najszybszy i wyraźniejszy sposób

//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>');

oto demo Fiddle

Mogę również polecić małą funkcję, aby wprowadzić więcej zmian 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] : '';
        });
    }
}());

Jeśli używasz mojego kompozytora strun, możesz to zrobić w podobny sposób

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'
}));

Oto demo Fiddle

Można to łatwo zrobić za pomocą funkcji „last ()” jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

Używam tego sposobu, gdy nie ma żadnego wiersza w tabeli, a także każdy wiersz jest dość skomplikowany.

style.css:

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

xxx.html

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

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

...

Aby znaleźć najlepsze rozwiązanie zamieszczone tutaj, jeśli w ostatnim wierszu znajduje się tabela zagnieżdżona, nowy wiersz zostanie dodany do tabeli zagnieżdżonej zamiast tabeli głównej. Szybkie rozwiązanie (biorąc pod uwagę tabele z / bez tbody i tabele z tabelami zagnieżdżonymi):

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

Przykład użycia:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

Rozwiązałem to w ten sposób.

Korzystanie z jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

Skrawek

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

Miałem pewne powiązane problemy, próbując wstawić wiersz tabeli po klikniętym wierszu. Wszystko jest w porządku, z wyjątkiem tego, że wywołanie .after () nie działa dla ostatniego rzędu.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

Wylądowałem z bardzo niechlujnym rozwiązaniem:

utwórz tabelę w następujący sposób (identyfikator dla każdego wiersza):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

itp ...

i wtedy :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

Możesz użyć tej wspaniałej funkcji dodawania wiersza tabeli jQuery . Działa świetnie z tabelami, które mają, <tbody>a które nie. Uwzględnia również rozpiętość kolorów ostatniego wiersza tabeli.

Oto przykładowe użycie:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

Moje rozwiązanie:

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

stosowanie:

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

Odpowiedź Neila jest zdecydowanie najlepsza. Jednak sprawy stają się naprawdę nieuporządkowane. Moją sugestią byłoby użycie zmiennych do przechowywania elementów i dołączenie ich do hierarchii 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>

Pisz za pomocą funkcji javascript

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

Uważam, że ta wtyczka AddRow jest bardzo przydatna do zarządzania wierszami tabeli. Jednak rozwiązanie Luke'a byłoby najlepiej dopasowane, jeśli po prostu chcesz dodać nowy wiersz.

Oto kod hacketi hacketi. Chciałem zachować szablon wiersza na stronie HTML . Wiersze tabeli 0 ... n są renderowane w czasie żądania, a ten przykład ma jeden wiersz zakodowany na stałe i wiersz uproszczonego szablonu. Tabela szablonów jest ukryta, a znacznik wiersza musi znajdować się w prawidłowej tabeli, w przeciwnym razie przeglądarki mogą upuścić ją z drzewa DOM . Dodanie wiersza używa licznika + 1, a bieżąca wartość jest zachowywana w atrybucie danych. Gwarantuje, że każdy wiersz otrzymuje unikalne parametry adresu URL .

Przeprowadziłem testy na przeglądarkach Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (z Symbian 3), Android i Firefox beta.

<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: Wszystkie kredyty udzielam zespołowi jQuery; zasługują na wszystko. Programowanie JavaScript bez jQuery - nawet nie chcę myśleć o tym koszmarze.

<tr id="tablerow"></tr>

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

Chyba zrobiłem to w moim projekcie, oto on:

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');
    });
      });
});

To jest moje rozwiązanie

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

jeśli masz inną zmienną, możesz uzyskać dostęp w <td>znaczniku takim jak ta próba.

W ten sposób mam nadzieję, że byłoby to pomocne

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

Ponieważ mam również sposób, aby w końcu dodać wiersz lub dowolne określone miejsce, więc myślę, że powinienem również udostępnić to:

Najpierw sprawdź długość lub rzędy:

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

a następnie użyj poniższego kodu, aby dodać swój wiersz:

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

Aby dodać dobry przykład na ten temat, oto działające rozwiązanie, jeśli chcesz dodać wiersz w określonej pozycji.

Dodatkowy wiersz jest dodawany po 5. rzędzie lub na końcu tabeli, jeśli jest mniej niż 5 wierszy.

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

Umieszczam zawartość w gotowym (ukrytym) pojemniku pod tabelą. Więc jeśli ty (lub projektant) musisz zmienić, nie jest wymagana edycja JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

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

Możesz buforować zmienną stopki i ograniczyć dostęp do DOM (uwaga: być może lepiej będzie użyć fałszywego wiersza zamiast stopki).

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

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

doda nowy wiersz do pierwszego TBODY w tabeli, bez względu na dowolny THEADlub TFOOTobecny. (Nie znalazłem informacji, z której wersji jQuery.append() takie zachowanie jest obecne).

Możesz spróbować w tych przykładach:

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

W którym przykładzie a bwiersz jest wstawiany po 1 2, a nie 3 4w drugim przykładzie. Jeśli tabela była pusta, jQuery tworzy TBODYnowy wiersz.

Jeśli używasz wtyczki JQuery Datatable, możesz spróbować.

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

Patrz Datatables fnAddData Datatables API

W prosty sposób:

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

Spróbuj tego: bardzo prosty sposób

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