Apa yang merupakan metode terbaik dalam jQuery untuk menambahkan baris tambahan untuk tabel sebagai baris terakhir?
Apakah ini bisa 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)?
Pendekatan yang anda sarankan tidak dijamin untuk memberikan anda hasil yang anda'kembali mencari - apa jika anda punya tbody
misalnya:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Anda akan berakhir dengan 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 memiliki apa-apa dalam setelah()
metode selama itu's HTML yang valid, termasuk beberapa baris sesuai contoh di atas.
Update: Meninjau kembali jawaban ini berikut beberapa kegiatan dengan pertanyaan ini. eyelidlessness membuat komentar yang baik itu akan selalu ada tbody
di DOM; ini adalah benar, tetapi hanya jika ada setidaknya satu baris. Jika anda tidak memiliki baris, tidak akan ada tbody
kecuali yang telah anda tentukan sendiri.
DaRKoN_ menunjukkan menambahkan ke tbody
daripada menambahkan konten setelah terakhir tr
. Ini menjadi masalah karena tidak ada baris, tapi masih isn't antipeluru seperti yang anda bisa secara teoritis memiliki beberapa tbody
unsur-unsur dan baris yang akan ditambahkan ke masing-masing dari mereka.
Menimbang semuanya, aku'm tidak yakin ada satu-line solusi yang account untuk setiap skenario yang mungkin. Anda akan perlu untuk memastikan kode jQuery penghitungan dengan markup anda.
Saya pikir solusi paling aman mungkin untuk memastikan anda meja
selalu menyertakan setidaknya satu tbody
di markup anda, bahkan jika itu tidak memiliki baris. Atas dasar ini, anda dapat menggunakan berikut yang akan bekerja namun banyak baris yang anda miliki (dan juga account untuk beberapa tbody
elemen):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
jQuery memiliki built-in fasilitas untuk memanipulasi elemen DOM on the fly.
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 $('<beberapa-tag>')
hal di jQuery adalah sebuah tag objek yang dapat memiliki beberapa y
atribut yang dapat diatur dan dapatkan, serta teks
, yang menggambarkan teks di antara tag berikut: <tag>teks</tag>
.
Ini adalah beberapa cukup aneh indentasi, tapi itu's lebih mudah bagi anda untuk melihat apa yang's terjadi di dalam contoh ini.
Jadi hal-hal telah berubah sejak @Lukas Bennett menjawab pertanyaan ini. Berikut ini adalah update.
jQuery sejak versi 1.4(?) secara otomatis mendeteksi jika elemen anda mencoba untuk memasukkan (menggunakan salah satu dari append()
, tambahkan()
, sebelum()
, atau setelah()
metode) adalah a <tr>
dan sisipan itu menjadi <tbody>
di meja anda atau membungkus menjadi baru <tbody>
jika salah satu doesn't ada.
Jadi ya teman-contoh kode yang dapat diterima dan akan bekerja dengan baik dengan jQuery 1.4+. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Bagaimana jika anda memiliki sebuah <tbody> dan<tfoot>
?
Seperti:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Maka akan menyisipkan baris baru di footer - tidak untuk tubuh.
Oleh karena itu solusi terbaik adalah untuk menyertakan <tbody>
tag dan menggunakan .menambahkan
, bukan .setelah
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Saya tahu anda telah meminta untuk metode jQuery. Saya melihat banyak dan menemukan bahwa kita dapat melakukannya dengan cara yang lebih baik daripada menggunakan JavaScript secara langsung oleh fungsi berikut.
tableObject.insertRow(index)
index
adalah bilangan bulat yang menentukan posisi baris untuk menyisipkan (dimulai dari 0). Nilai -1 juga dapat digunakan; yang mengakibatkan bahwa baris baru akan disisipkan di posisi terakhir.
Parameter ini diperlukan di Firefox dan Opera, tapi itu adalah opsional di Internet Explorer, Chrome dan Safari.
Jika parameter ini diabaikan, insertRow()
menyisipkan baris baru di posisi terakhir di Internet Explorer dan pada posisi pertama di Chrome dan Safari.
Ini akan bekerja untuk setiap dapat diterima struktur tabel HTML.
Contoh berikut akan menyisipkan baris terakhir (-1 digunakan sebagai index):
<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 sarankan
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
sebagai lawan
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
Pertama
dan terakhir
kata kunci bekerja pada pertama atau terakhir tag harus dimulai, tidak tertutup. Oleh karena itu, ini bermain lebih bagus dengan nested tables, jika anda don't ingin bersarang tabel yang akan diubah, tetapi menambahkan ke tabel secara keseluruhan. Setidaknya, ini adalah apa 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 yang jelas cara ini
//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>');
berikut ini adalah demo [Biola][1]
Juga saya dapat merekomendasikan kecil yang berfungsi 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 string saya komposer yang dapat anda lakukan seperti 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'
}));
Berikut ini adalah demo [Biola][2]
I'm menggunakan cara ini ketika tidak ada baris pada tabel, serta, setiap baris adalah cukup rumit.
gaya.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Untuk solusi terbaik diposting di sini, jika ada's tabel bersarang pada baris terakhir, baris baru akan ditambahkan ke tabel bersarang bukan dari tabel utama. Solusi yang cepat (mengingat 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 dipecahkan dengan cara ini.
Menggunakan jquery
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
$('#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 memiliki beberapa masalah yang terkait, mencoba untuk memasukkan sebuah baris tabel setelah diklik baris. Semua baik-baik saja kecuali .setelah() call tidak bekerja untuk baris terakhir.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Saya mendarat dengan sangat berantakan solusi:
membuat tabel sebagai berikut (id untuk setiap baris):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
dll ...
dan kemudian :
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Anda dapat menggunakan ini besar jQuery menambahkan baris tabel fungsi. Ia bekerja besar dengan meja-meja yang telah <tbody>
dan yang don't. Juga dibutuhkan dalam pertimbangan colspan terakhir anda baris tabel.
Berikut adalah contoh penggunaan:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
// 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);
Saya menemukan ini AddRow plugin sangat berguna untuk mengelola baris tabel. Meskipun, Lukas's solusi akan cocok jika anda hanya perlu menambahkan baris baru.
Neil's jawaban adalah jauh salah satu yang terbaik. Namun hal-hal berantakan benar-benar cepat. Saran saya akan menggunakan variabel untuk menyimpan elemen dan menambahkan mereka ke DOM hirarki.
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);
Saya Kira saya telah dilakukan dalam proyek saya , di sini adalah:
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');
});
});
});