Jaka jest najlepsza metoda w jQuery, aby dodać dodatkowy rząd do stołu jako ostatni wiersz?

Czy to jest akceptowalne?

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

Czy istnieją ograniczenia do tego, co możesz dodać do tabeli (takich jak wejścia, wybiera, liczba wierszy)?

2504
Darryl Hein 5 październik 2008, 01:33

28 odpowiedzi

Więc rzeczy zmieniły się odkąd @Luke Bennett odpowiedział na to pytanie. Oto aktualizacja.

JQuery Od wersji 1.4 (?) Automatycznie wykrywa, jeśli element, który próbujesz wstawić (przy użyciu dowolnej z {{x0} }, {x1}}, before() lub { {X3}} metody) to <tr> i wstawia ją do pierwszego <tbody> w tabeli lub otacza go do nowego <tbody>, jeśli nie istnieje.

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

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
316
Community 23 maj 2017, 12:26

Co jeśli miałeś <tbody> i <tfoot>?

Jak na przykład:

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

Wtedy włożyłoby nowy rząd w stopce - nie do ciała.

Stąd najlepszym rozwiązaniem jest dołączenie znacznika <tbody> i użyj .append, a nie .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");
170
Sohel Ahmed Mesaniya 19 styczeń 2016, 10:18

Wiem, że poprosiłeś o metodę jQuery. Bardzo wyglądałem i stwierdzam, że możemy to zrobić w lepszy sposób niż używanie JavaScript bezpośrednio według następującej funkcji.

tableObject.insertRow(index)

index jest liczbą całkowitą, która określa pozycję wiersza, aby wstawić (zaczyna się od 0). Wartość -1 może być również stosowana; co powoduje, że nowy wiersz zostanie wstawiony w ostatniej pozycji.

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

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

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

Poniższy przykład włoży wiersz w ostatnim (-1 jest używany 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.

69
AminM 6 styczeń 2021, 11:34

Polecam

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

W przeciwieństwie do

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

Słowa kluczowe first i last Pracują na pierwszym lub ostatniego znacznika, które należy rozpocząć, nie zamknięte. Dlatego to gra ładniejsza z zagnieżdżonymi tabelami, jeśli nie chcesz, aby zagnieżdżony stół do zmiany, ale zamiast tego dodać do ogólnej tabeli. Przynajmniej to właśnie znalazłem.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>
35
pimvdb 29 wrzesień 2011, 05:34

Moim zdaniem najszybszy i wyraźny 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 skrzypce

Również mogę polecić małą funkcję, aby dokonać 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 swojego kompozytora ciągu, możesz to zrobić

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

33
Community 20 czerwiec 2020, 09:12

Można to zrobić łatwo korzystać z funkcji "Last ()" jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");
24
Darryl Hein 26 styczeń 2010, 17:12

Używam tego sposobu, gdy w stole nie ma żadnego wiersza, jak również każdy wiersz jest dość skomplikowany.

Style.css:

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

Xxx.html.

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

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

...
17
Dominic 16 grudzień 2010, 05:30

W przypadku najlepszego rozwiązania opublikowanego tutaj, jeśli w ostatnim wierszu jest zagnieżdżona tabela, nowy wiersz zostanie dodany do zagnieżdżonego stołu zamiast tabeli głównej. Szybkie rozwiązanie (biorąc pod uwagę tabele z / bez TBABUS i tabel z zagnieżdżonymi tabelami):

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>');
14
Anik Islam Abhi 12 listopad 2015, 02:21

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

Za pomocą 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>
14
Anton vBR 24 styczeń 2019, 09:27

Miałem kilka powiązanych problemów, próbując wstawić wiersz tabeli po kliknięciu wiersza. Wszystko jest w porządku, oprócz połączenia .Fter () nie działa dla ostatniego wiersza.

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

Wylądowałem z bardzo nieporządnym rozwiązaniem:

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

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

Itd. ...

I wtedy :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
13
Erick Robertson 26 czerwiec 2013, 14:20

Możesz użyć tego wspaniałego jQuery Dodaj wiersz tabeli Funkcja. Działa świetnie z tabelami, które mają <tbody> i to nie. Również uwzględnia Colspan ostatniego wiersza tabeli.

Oto przykład użycie:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
11
Uzbekjon 2 marzec 2009, 13:21

Moje rozwiązanie:

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

Wykorzystanie:

$('#Table').addNewRow(id1);
10
Peter Mortensen 30 marzec 2013, 05:46
    // 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);
10
Pankaj Garg 6 grudzień 2015, 05:39

Odpowiedź Neila jest zdecydowanie najlepsza. Jednak rzeczy naprawdę szybko się brudnie. Moja sugestia byłaby użycia zmiennych do przechowywania elementów i dołączyć je 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);
9
Community 23 maj 2017, 12:34
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Napisz funkcję JavaScript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
9
Jakir Hossain 19 styczeń 2016, 20:09

Znalazłem to Addrow Plugin dość przydatna do zarządzania wierszami tabeli. Chociaż, Luke's Rozwiązanie byłoby najlepszym dopasowaniem, jeśli wystarczy dodać nowy wiersz.

9
Community 23 maj 2017, 12:10

Oto jakiś kod hacketi. Chciałem utrzymać szablon rzędu w HTML strona. Wiersze stołowe 0 ... N są renderowane na czas, a ten przykład ma jeden hardcodowany wiersz i uproszczony wiersz szablonu. Tabela szablonu jest ukryta, a znacznik wiersza musi znajdować się w prawidłowej tabeli lub przeglądarek, może upuścić go z dom Drzewo. Dodawanie wiersza wykorzystuje identyfikator licznika + 1, a bieżąca wartość jest utrzymywana w atrybucie danych. Gwarantuje każdy wiersz Uzyskanie unikalnego URL parametry.

Uruchomiłem testy w programie Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (z Symbian 3), Androida i przeglądarze BETA 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: Daję wszystkie kredyty zespołowi JQuery; zasługują na wszystko. Programowanie JavaScript bez jQuery - nawet nie chcę myśleć o tym koszmaru.

7
Peter Mortensen 30 marzec 2013, 05:55
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
7
Vivek S 21 grudzień 2013, 11:54

Myślę, że zrobiłem w moim projekcie, tutaj jest:

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
Shaunak D 17 kwiecień 2015, 16:36

To jest moje rozwiązanie

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
7
Daniel Ortegón 20 lipiec 2017, 02:34

Jeśli masz inną zmienną, możesz uzyskać dostęp w <td> tak jak spróbować.

W ten sposób mam nadzieję, że byłoby 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);
7
RKRK 15 wrzesień 2017, 11:00

Ponieważ mam też sposób też dodać wiersz w końcu lub jakiekolwiek konkretne miejsce, więc myślę, że powinienem także dzielić się tym:

Najpierw znajdź długość lub wiersze:

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);
6
Jaid07 20 maj 2013, 09:14

Aby dodać dobry przykład na temat, tutaj jest rozwiązanie robocze, jeśli chcesz dodać wiersz w określonej pozycji.

Dodatkowy rząd jest dodawany po piątym rzędzie lub na końcu stołu, jeśli jest mniej niż 5 rzędów.

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

Umieściłem zawartość na gotowym (ukrytym) pojemniku poniżej stołu .. Jeśli (lub projektant) muszą się zmienić, nie jest wymagane do edycji JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>
6
d.raev 29 sierpień 2013, 11:35
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Możesz wspomnieć o zmiennej stopki i zmniejszyć dostęp do DOM (Uwaga: może być lepiej, aby użyć fałszywego wiersza zamiast stopki).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
6
Shaunak D 17 kwiecień 2015, 16:37
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Dodanie nowego wiersza do najpierw TBODY tabeli, bez w zależności od dowolnego THEAD lub TFOOT. (Nie znalazłem informacji, z której wersji jQuery .append() jest obecny.)

Możesz spróbować go 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łady a b} jest włożony po 1 2, a nie po 3 4 w drugim przykładzie. Jeśli tabela była pusta, jQuery tworzy TBODY dla nowego wiersza.

5
Alexey Pavlov 19 kwiecień 2012, 10:53

Jeśli używasz wtyczki datatable jQuery, 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 Dane danych Fnaddata API DATATAbles

5
Praveena M 2 październik 2013, 05:06

W prosty sposób:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
5
vipul sorathiya 16 czerwiec 2015, 12:11

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>
4
rajmobiapp 26 marzec 2019, 11:47