Tambahkan baris tabel dalam 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, seleksi, jumlah baris)?

Pendekatan yang Anda sarankan tidak dijamin untuk memberikan hasil yang Anda cari - bagaimana jika Anda memiliki tbodycontoh:

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

Karenanya saya akan merekomendasikan pendekatan ini:

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

Anda dapat memasukkan apa saja di dalam after()metode selama HTML itu valid, termasuk beberapa baris seperti contoh di atas.

Pembaruan: Meninjau kembali jawaban ini mengikuti aktivitas terkini dengan pertanyaan ini. kelopak mata membuat komentar yang baik bahwa akan selalu ada tbodydalam DOM; ini benar, tetapi hanya jika setidaknya ada satu baris. Jika Anda tidak memiliki baris, tidak akan ada tbodykecuali Anda telah menentukan sendiri.

DaRKoN_ menyarankan untuk tbodymenambahkan daripada menambahkan konten setelah yang terakhir tr. Ini mengatasi masalah tidak memiliki baris, tetapi masih tidak antipeluru karena Anda secara teoritis dapat memiliki beberapa tbodyelemen dan baris akan ditambahkan ke masing-masing.

Menimbang semuanya, saya tidak yakin ada solusi satu baris tunggal yang memperhitungkan setiap skenario yang mungkin. Anda perlu memastikan kode jQuery sesuai dengan markup Anda.

Saya pikir solusi teraman mungkin untuk memastikan Anda tableselalu menyertakan setidaknya satu tbodydi markup Anda, bahkan jika tidak memiliki baris. Atas dasar ini, Anda dapat menggunakan yang berikut ini yang akan berfungsi namun banyak baris yang Anda miliki (dan juga memperhitungkan beberapa tbodyelemen):

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

jQuery memiliki fasilitas bawaan untuk memanipulasi elemen DOM dengan cepat.

Anda dapat menambahkan apa pun ke meja Anda seperti ini:

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

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

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

Jadi semuanya berubah sejak @Luke Bennett menjawab pertanyaan ini. Ini adalah pembaruan.

jQuery sejak versi 1.4 (?) secara otomatis mendeteksi jika elemen Anda mencoba untuk memasukkan (menggunakan salah satu append(), prepend(), before(), atau after()metode) adalah <tr>dan menyisipkan ke dalam pertama <tbody>di meja Anda atau membungkus menjadi baru <tbody>jika salah satu 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>');

Bagaimana jika Anda punya <tbody>dan <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 dengan memasukkan <tbody>tag dan penggunaan .append, daripada .after.

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

Saya tahu Anda telah meminta metode jQuery. Saya melihat banyak dan menemukan bahwa kita 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 akan disisipkan (mulai dari 0). Nilai -1 juga bisa digunakan; yang menghasilkan baris baru akan disisipkan di posisi terakhir.

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

Jika parameter ini dihilangkan, insertRow()masukkan 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 memasukkan 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 ini membantu.

saya merekomendasi

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

sebagai lawan

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

Kata kunci firstdan lastbekerja pada tag pertama atau terakhir untuk memulai, bukan ditutup. Oleh karena itu, ini bermain lebih baik dengan tabel bersarang, jika Anda tidak ingin tabel bersarang diubah, tetapi tambahkan ke tabel keseluruhan. Setidaknya, inilah yang saya temukan.

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

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 Fiddle

Saya juga 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 komponis string saya, Anda dapat melakukan ini seperti

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 Fiddle

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

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

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

style.css:

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

xxx.html

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

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

...

Untuk solusi terbaik yang diposting di sini, jika ada tabel bersarang di baris terakhir, baris baru akan ditambahkan ke tabel bersarang alih-alih tabel utama. Solusi cepat (mempertimbangkan tabel dengan / tanpa tbody dan tabel dengan tabel bersarang):

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

Contoh penggunaan:

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

Saya memecahkannya dengan cara ini.

Menggunakan jquery

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

Potongan

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

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

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

Saya mendarat dengan solusi yang sangat berantakan:

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

Anda dapat menggunakan fungsi jQuery add table row ini . Ini berfungsi baik dengan tabel yang memiliki <tbody>dan yang tidak. Juga mempertimbangkan colspan dari baris tabel terakhir Anda.

Berikut adalah contoh penggunaannya:

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

Solusi saya:

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

pemakaian:

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

Jawaban Neil sejauh ini adalah yang terbaik. Namun semuanya menjadi sangat cepat berantakan. Saran saya adalah menggunakan variabel untuk menyimpan elemen dan menambahkannya ke hierarki 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>

Menulis dengan fungsi javascript

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

Saya menemukan plugin AddRow ini cukup berguna untuk mengelola baris tabel. Padahal, solusi Luke akan paling cocok jika Anda hanya perlu menambahkan baris baru.

Berikut adalah beberapa kode retas hacketi. Saya ingin mempertahankan templat baris di halaman HTML . Baris tabel 0 ... n ditampilkan pada waktu permintaan, dan contoh ini memiliki satu baris hardcode dan baris templat yang disederhanakan. Tabel template disembunyikan, dan tag baris harus berada dalam tabel yang valid atau browser dapat menjatuhkannya dari pohon DOM . Menambahkan baris menggunakan penghitung penghitung + 1, dan nilai saat ini dipertahankan dalam atribut data. Ini menjamin setiap baris mendapat URL unik parameter .

Saya telah menjalankan tes pada Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (dengan Symbian 3), stok Android dan browser 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: Saya memberikan semua kredit kepada tim jQuery; mereka layak mendapatkan segalanya. Pemrograman JavaScript tanpa jQuery - Saya bahkan tidak ingin memikirkan mimpi buruk itu.

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

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

Saya rasa saya telah melakukan dalam proyek saya, ini dia:

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

Ini solusi saya

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

jika Anda memiliki variabel lain, Anda dapat mengakses dalam <td>tag seperti itu coba.

Dengan cara ini saya berharap ini akan sangat membantu

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

Karena saya juga punya cara menambahkan baris pada akhirnya atau tempat tertentu, jadi saya pikir saya juga harus membagikan ini:

Pertama cari tahu panjang atau baris:

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

dan kemudian gunakan kode di bawah ini untuk menambahkan baris Anda:

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

Untuk menambahkan contoh yang baik pada topik, berikut adalah solusi yang berfungsi jika Anda perlu menambahkan baris pada posisi tertentu.

Baris tambahan ditambahkan setelah baris ke-5, atau di akhir tabel jika ada kurang dari 5 baris.

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

Saya meletakkan konten di wadah siap (tersembunyi) di bawah tabel ..jadi jika Anda (atau perancang) harus mengubahnya, tidak perlu mengedit 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>

Anda bisa men-cache variabel footer dan mengurangi akses ke DOM (Catatan: mungkin lebih baik menggunakan baris palsu daripada footer).

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

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

akan menambahkan baris baru ke yang pertama TBODY dari tabel, tanpa tergantung pada salah satu THEADatau TFOOTsekarang. (Saya tidak menemukan informasi dari versi jQuery mana .append()perilaku ini hadir.)

Anda dapat mencobanya dalam contoh berikut:

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

Di mana contoh a bbaris disisipkan setelah 1 2, bukan setelah 3 4dalam contoh kedua. Jika tabel itu kosong, jQuery membuat TBODYbaris baru.

Jika Anda menggunakan plugin Datatable JQuery, Anda dapat mencoba.

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

Rujuk Datatables fnAddData Datatables API

Secara sederhana:

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

Coba ini: cara yang sangat sederhana

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