Tambahkan baris tabel dalam jQuery


2425

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


2
Terima kasih Ash. Saya juga baru belajar jQuery dan sulit menemukan cara terbaik, terutama hal-hal sederhana. Alasan mereka adalah 2 pertanyaan adalah karena saya memposting satu dan kemudian hampir satu jam kemudian saya menyadari saya harus memasukkan yang lain dan tidak berpikir saya harus mengubah yang pertama.
Darryl Hein


17
FYI - Hindari penggunaan beberapa append (sangat memperlambat kinerja), daripada membangun string Anda atau menggunakan JavaScript yang jauh lebih cepat.
Gerrit Brink


Untuk jaga-jaga jika baris terlalu kompleks, apa yang saya lakukan adalah, sembunyikan baris pertama dengan struktur yang diperlukan, buat klon dan modifikasi teks dan masukkan setelah baris pertama, dengan cara ini jika Anda mengambil data dari respons ajax, tabel Anda akan dibuat, ingat mengkloningnya di luar loop, kemudian menggunakannya untuk memodifikasi konten di dalam loop. $ ("# mainTable tbody"). append (baris); baris adalah salinan tiruan yang dimodifikasi :)
Aadam

Jawaban:


2143

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

6
@Rama, tidak, tidak akan. Perlu ada solusi yang lebih baik.
Brian Liang

40
Akan selalu ada orang di DOM.
kelopak mata

4
tbody kosong tidak memvalidasi html Anda
2ni

40
Perbaikan kecil untuk solusi yang bagus adalah dengan mengoptimalkan pemilih. Anda bisa mendapatkan peningkatan kecepatan dengan: $('#myTable').find('tbody:last')alih-alih $('#myTable > tbody:last').
Erik Töyrä Silfverswärd

2
"kelopak mata membuat komentar yang baik bahwa akan selalu ada tbody di DOM" - Saya hanya mencoba ini tanpa tbody dan tidak berfungsi - itu hanya bekerja jika ada tbody.
BrainSlugs83

771

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.


60
Bagi yang mencoba ini, perhatikan dengan cermat lokasi tanda kurung. Bersarang dengan benar sangat penting.
Ryan Lundy

9
Bagaimana dengan tag penutup? Apakah itu tidak perlu?
senfo

9
Bukankah $ ("# tableClassname") seharusnya menjadi $ ("# tableID") karena simbol hash merujuk pada ID dan bukan classname?
Dave

7
Aku benci rantai yang aneh. Ini adalah mimpi buruk untuk mempertahankan kode yang penuh dengan hal-hal seperti itu.
bancer

4
@senfo menambahkan elemen anak akan membuatnya secara otomatis.
Michel de Ruiter

308

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

2
Hati-hati dengan asumsi ini. Jika markup tambahan Anda dimulai dengan \ n atau \ n \ r, jQuery tidak akan mendeteksi bahwa itu adalah <tr> dan akan menambahkannya ke <table> dan bukan ke <tbody>. Saya baru saja menemukan ini dengan markup yang dihasilkan oleh tampilan MVC yang memiliki garis ekstra di awal.
Mik

@Mik, terima kasih atas bantuannya! Saya kira yourString.trim()bisa memperbaiki ini.
Salman von Abbas

Tentu saja, tetapi Anda harus memikirkannya. Lebih baik bawa kebiasaan menambahkan ke <tbody> jika Anda tahu ada satu.
Mik

jQuery 3.1 masih mensyaratkan bahwa seseorang harus ditentukan. Lihat di sini: jsfiddle.net/umaj5zz9/2
user984003

Ini menyebabkan halaman saya di-refresh. Bagaimana saya bisa mencegahnya?
Avi

168

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

10
Anda telah menerapkan langkah Anda secara salah. Itu harus datang sebelum tbody, bukan setelah - lihat w3.org/TR/html4/struct/tables.html#h-11.2.3 . Oleh karena itu solusi saya masih berfungsi kecuali Anda memilih untuk melanggar standar (dalam hal ini Anda dapat mengharapkan hal-hal lain juga salah). Solusi saya juga berfungsi apakah Anda memiliki tbody atau tidak, sedangkan proposal Anda akan gagal jika tidak ada tbody.
Luke Bennett

6
Meskipun ada kesalahan dalam <tfoot />, ini adalah solusi yang lebih baik. Jika tidak ada <tbody /> Anda dapat menggunakan teknik yang sama pada <tabel /> itu sendiri. Sedangkan "jawaban yang diterima" memerlukan pemeriksaan tambahan untuk melihat apakah ada baris yang ada atau tidak. (Saya tahu OP tidak menentukan persyaratan ini, tetapi tidak masalah - posting ini muncul pertama pada pencarian Google untuk teknik ini, dan jawaban terbaik bukan atas.)
CleverPatrick

5
Ini adalah solusi yang lebih baik daripada menemukan. Dalam beberapa iterasi teknik ini tampaknya selalu berhasil. Sebagai FYI tambahan, Anda dapat menggunakan .prepend untuk menambahkan baris ke awal tabel sedangkan .append menempatkan baris di ujung tabel.
Lance Cleveland

Ini tidak benar, itu akan menambahkan baris ke setiap baris di tbody
garg10mungkin

@ garg10may Bisakah Anda memberi saran caranya? Ini menargetkan badan, bukan elemen anak.
ChadT

64

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.


2
masalah dengan metode ini (seperti yang baru saja saya ketahui) adalah bahwa jika Anda memiliki catatan kaki akan menambahkan SETELAH catatan kaki dengan indeks -1 sebagai.
kdubs

35

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>

32

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


Jika Anda memiliki banyak, tbodyAnda bisa mendapatkan lebih banyak sisipan
Mark Schultheiss

Ya Anda bisa :) Anda dapat mencoba $("SELECTOR").last()membatasi koleksi tag Anda
sulest

23

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

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

9
Ide bagus, tapi saya pikir Anda ingin mengubah pemilih ke #tableId tr karena sekarang Anda akan mendapatkan tabel tambahkan baris di bawah tabel.
Darryl Hein

17

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

...

Terima kasih. Ini solusi yang sangat elegan. Saya suka bagaimana ini menyimpan template di dalam grid. Itu membuat kode jadi lebih sederhana dan lebih mudah dibaca dan dipelihara. Terima kasih lagi.
Rodney

14

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

14

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 dapat berhasil menambahkan data dinamis di baris baru sekarang, tetapi setelah menggunakan metode ini, filter khusus saya tidak berfungsi .. Apakah Anda punya solusi untuk itu? Terima kasih
Arjun

Saya pikir Anda perlu memanggil semacam fungsi pembaruan. Hade to tell tanpa contoh.
Anton vBR

13

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

Saya pikir ini harus menjadi pertanyaan baru, alih-alih jawaban yang sudah ada ...
Darryl Hein

11

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

Saya tidak bisa melihat itu menjadi sangat berguna. Yang dilakukannya hanyalah menambahkan baris tabel kosong ke tabel. Biasanya, jika tidak selalu, Anda ingin menambahkan baris tabel baru dengan beberapa data di dalamnya.
Darryl Hein

1
Tetapi biasanya itu yang Anda inginkan. Fungsi ini memungkinkan Anda menambahkan baris kosong ke salah satu tabel Anda, tidak peduli berapa banyak kolom dan rentang baris yang Anda miliki, sehingga menjadikannya fungsi UNIVERSAL. Anda dapat melanjutkan dari sana misalnya dengan $ ('. Tbl tr: last td'). Intinya adalah memiliki fungsi universal !!!
Uzbekjon

Jika fungsi Anda juga menambahkan data ke baris baru Anda, Anda tidak akan dapat menggunakannya lagi di proyek berikutnya. Apa intinya?! Namun menurut saya, Anda tidak perlu membagikannya ...
Uzbekjon

Jika Anda mengusulkan fungsi yang bukan merupakan bagian dari paket umum, harap masukkan kode fungsi lengkap di sini. Terima kasih.
Yevgeniy Afanasyev

10

Solusi saya:

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

pemakaian:

$('#Table').addNewRow(id1);

jadi bagaimana jika tidak ada tbodydalam tabel .. ?? berarti ada baris langsung di dalam <table>elemen, bahkan jika tanpa header apa pun.
shashwat

Saya akan sangat menyarankan Anda memiliki markup Anda dengan <TBody> sehingga sesuai dengan standar HTML 5, jika tidak maka Anda selalu dapat melakukan $ (this) .append ('<tr id = "' + rowId + '" "> </ tr> '); yang hanya menambahkan baris dalam tabel.
Ricky G

Saya pikir jika Anda akan membuat fungsi ini, Anda mungkin dapat mengembalikan objek jQuery untuk baris baru sehingga dapat di-rantai.
Chaos

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

Meskipun ini mungkin jawaban, namun nanti tidak terlalu berguna bagi pengunjung ... Harap tambahkan beberapa penjelasan seputar jawaban Anda.
Jayan

9

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

9
<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>';


7

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.


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

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

7

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

7

Ini solusi saya

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

7

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

6

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

6

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>

6
<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>")

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


5

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


5

Secara sederhana:

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

Bisakah Anda menjelaskan lebih lanjut jawaban Anda dengan menambahkan sedikit deskripsi tentang solusi yang Anda berikan?
abarisone

4

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.