Pertanyaan Tambahkan baris tabel di jQuery


Apa metode terbaik di jQuery untuk menambahkan baris tambahan ke tabel sebagai baris terakhir?

Apakah ini dapat diterima?

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

Apakah ada batasan untuk apa yang dapat Anda tambahkan ke tabel seperti ini (seperti input, memilih, jumlah baris)?


2050
2017-10-04 21:33


asal


Jawaban:


Pendekatan yang Anda sarankan tidak dijamin memberi Anda hasil yang Anda cari - bagaimana jika Anda punya tbody sebagai contoh:

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

Anda akan berakhir dengan yang berikut:

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

Oleh karena itu saya akan merekomendasikan pendekatan ini sebagai gantinya:

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

Anda dapat menyertakan apa pun di dalam after() metode selama itu HTML yang valid, termasuk beberapa baris sesuai contoh di atas.

Memperbarui: Meninjau kembali jawaban ini mengikuti aktivitas terbaru dengan pertanyaan ini. kelopak mata membuat komentar yang baik bahwa akan selalu ada tbody di DOM; ini benar, tetapi hanya jika ada setidaknya satu baris. Jika Anda tidak memiliki baris, tidak akan ada tbody kecuali Anda telah menentukannya sendiri.

DaRKoN_ menyarankan menambahkan ke tbody daripada menambahkan konten setelah yang terakhir tr. Ini mengatasi masalah tidak memiliki baris, tetapi masih tidak tahan peluru karena Anda secara teoritis memiliki beberapa tbody elemen dan baris akan ditambahkan ke masing-masing.

Menimbang segalanya, saya tidak yakin ada solusi satu baris tunggal yang bertanggung jawab untuk setiap skenario yang mungkin. Anda harus memastikan kode jQuery dihitung dengan markup Anda.

Saya pikir solusi teraman mungkin adalah untuk memastikan Anda table selalu termasuk setidaknya satu tbody di markup Anda, meskipun tidak memiliki baris. Atas dasar ini, Anda dapat menggunakan yang berikut ini yang akan berfungsi, namun banyak baris yang Anda miliki (dan juga akun untuk beberapa tbody elemen):

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

1863
2017-10-04 21:49



jQuery memiliki fasilitas built-in untuk memanipulasi elemen DOM dengan cepat.

Anda dapat menambahkan sesuatu ke meja Anda seperti ini:

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

Itu $('<some-tag>') hal di jQuery adalah objek tag yang dapat memiliki beberapa attr atribut yang dapat diatur dan didapatkan, serta text, yang mewakili teks di antara tag di sini: <tag>text</tag>.

Ini adalah beberapa indenting yang cukup aneh, tetapi lebih mudah bagi Anda untuk melihat apa yang terjadi dalam contoh ini.


697
2017-08-14 15:30



Jadi hal-hal telah berubah sejak itu @Luke Bennett menjawab pertanyaan ini. Berikut ini pembaruan.

jQuery sejak versi 1.4 (?) secara otomatis mendeteksi apakah elemen yang Anda coba masukkan (menggunakan salah satu dari append(), prepend(), before(), atau after() metode) adalah a <tr> dan memasukkannya ke yang pertama <tbody> di meja Anda atau membungkusnya menjadi baru <tbody> jika tidak ada.

Jadi ya kode contoh Anda dapat diterima dan akan berfungsi dengan baik dengan jQuery 1.4+. ;)

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

274
2018-06-05 20:12



Bagaimana jika Anda punya <tbody> dan a <tfoot>?

Seperti:

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

Maka itu akan memasukkan baris baru Anda di footer - bukan ke tubuh.

Oleh karena itu solusi terbaik adalah memasukkan a <tbody> tag dan gunakan .append, daripada .after.

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

147
2018-01-22 06:47



Saya tahu Anda telah meminta metode jQuery. Saya melihat banyak dan menemukan bahwa kami dapat melakukannya dengan cara yang lebih baik daripada menggunakan JavaScript secara langsung dengan fungsi berikut.

tableObject.insertRow(index)

indexadalah bilangan bulat yang menentukan posisi baris yang disisipkan (dimulai dari 0). Nilai -1 juga bisa digunakan; yang menghasilkan baris baru akan disisipkan di posisi terakhir.

Parameter ini diperlukan di Firefox dan Opera, tetapi ini opsional di Internet Explorer, Chrome dan Safari.

Jika parameter ini diabaikan, insertRow() menyisipkan baris baru di posisi terakhir di Internet Explorer dan di posisi pertama di Chrome dan Safari.

Ini akan bekerja untuk setiap struktur tabel HTML yang dapat diterima.

Contoh berikut akan menyisipkan baris terakhir (-1 digunakan sebagai 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>

Saya harap itu membantu.


48
2018-04-20 17:38



saya merekomendasi

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

sebagai lawan

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

Itu first dan last kata kunci berfungsi pada tag pertama atau terakhir yang akan dimulai, tidak ditutup. Oleh karena itu, ini bermain lebih bagus dengan tabel bersarang, jika Anda tidak ingin tabel bersarang diubah, tetapi tambahkan ke keseluruhan tabel. Setidaknya, ini yang saya temukan.

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

31
2017-10-22 21:34



Menurut saya cara tercepat dan jelas adalah

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

di sini adalah demo Biola

Juga saya dapat merekomendasikan fungsi kecil untuk membuat lebih banyak perubahan 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] : '';
        });
    }
}());

Jika Anda menggunakan penggubah string saya, Anda dapat melakukan hal ini

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

Ini demo Biola


26
2018-06-30 12:40



Ini dapat dilakukan dengan mudah menggunakan fungsi "last ()" dari jQuery.

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

21
2018-01-26 13:34



Saya menggunakan cara ini ketika tidak ada baris dalam tabel, serta, setiap baris cukup rumit.

style.css:

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

xxx.html

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

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

...

16
2017-12-16 05:30



Saya mengalami beberapa masalah terkait, mencoba memasukkan baris tabel setelah baris yang diklik. Semua baik-baik saja kecuali .after () panggilan tidak berfungsi untuk baris terakhir.

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

Saya mendarat dengan solusi yang sangat tidak rapi:

buat tabel sebagai berikut (id untuk setiap baris):

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

dll ...

lalu :

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

13
2017-10-05 19:17