JQuery'deki en son yöntem, bir tabloya son satır olarak ek bir satır eklemek nedir?
Bu kabul edilebilir mi?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Buna benzer bir tabloya ekleyebileceğiniz kısıtlamalar var mı (girişler, seçimler, satır sayısı gibi)?
Önerdiğiniz yaklaşım, size aradığınız sonucu vermek için garanti edilmez. tbody Örneğin:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Sonunda şununla sona ereceksin:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Bu nedenle, bu yaklaşımı tavsiye ederim:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
İçindeki her şeyi dahil edebilirsiniz after() Yukarıdaki örnekte olduğu gibi birden çok satır içeren geçerli bir HTML olduğu sürece yöntem.
Güncelleştirme: Bu soruyla son etkinliğin ardından bu cevabı tekrar gözden geçirin. gözkapaksızlık her zaman bir olacak bir iyi yorum yapar tbody DOM’da Bu doğrudur, ancak sadece en az bir satır varsa. Hiç satırınız yoksa, hayır olacak tbody Kendini belirmediğin sürece.
DaRKoN_ anlaşılacağı ekleyerek tbody Sondan sonra içerik eklemek yerine tr. Bu, hiç satır olmaması sorununu ortadan kaldırıyor, ancak teorik olarak birden fazla bilgiye sahip olabileceğiniz için hala kurşun geçirmez değil tbody elemanlar ve satır her birine eklenirdi.
Herşeyi tartmak, mümkün olan her senaryo için tek bir tek çözüm bulunmadığından emin değilim. JQuery kodunun işaretlemenizle uyumlu olduğundan emin olmanız gerekir.
Bence en güvenli çözüm muhtemelen sizin table her zaman en az bir tane içerir tbody İşaretlemenizde, satırları olmasa bile. Bu temelde, sahip olduğunuz birçok satırı (ve aynı zamanda birden fazla hesaba sahip olan) çalışacak aşağıdakileri kullanabilirsiniz. tbody elementler):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
jQuery, DOM öğelerini anında işlemek için yerleşik bir donanıma sahiptir.
Masanıza şu şekilde herhangi bir şey ekleyebilirsiniz:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
$('<some-tag>') jQuery'deki bir şey, birkaç tane olabilecek bir etiket nesnesidir attr ayarlanabilen ve alınabilecek nitelikler textBuradaki etiket arasındaki metni temsil eden: <tag>text</tag>.
Bu biraz garip girinti, ama bu örnekte neler olduğunu görmen daha kolay.
O zamandan beri işler değişti @Luke Bennett Bu soruya cevap verdi. İşte bir güncelleme.
jQuery, 1.4 sürümünden (?), eklemeye çalıştığınız öğeyi otomatik olarak algılar (herhangi birini kullanarak). append(), prepend(), before()veya after() yöntemler) bir <tr> ve ilk içine ekler <tbody> masanızda veya yeni bir saran <tbody> eğer biri yoksa.
Yani evet örnek kodunuz kabul edilebilir ve jQuery 1.4+ ile iyi çalışır. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Ya bir <tbody> ve bir <tfoot>?
Gibi:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Sonra yeni sıranızı altbilgiye yerleştirir - gövdeye değil.
Bu nedenle en iyi çözüm, <tbody> etiket ve kullanım .append, ziyade .after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
JQuery yöntemi istediğini biliyorum. Çok fazla baktım ve JavaScript'i doğrudan aşağıdaki işlevle kullanmanın daha iyi bir yolla yapabildiğimizi fark ettim.
tableObject.insertRow(index)
indexEklenecek satırın konumunu (0'dan başlar) belirten bir tamsayıdır. -1 değeri de kullanılabilir; Bu da yeni sıranın son pozisyona eklenmesini sağlar.
Bu parametre Firefox'ta gereklidir ve Operaancak Internet Explorer'da isteğe bağlıdır Krom ve Safari.
Bu parametre atlanırsa, insertRow() Internet Explorer'da son konumda ve Chrome ve Safari'de ilk konumda yeni bir satır ekler.
HTML tablosunun her kabul edilebilir yapısı için çalışacaktır.
Aşağıdaki örnek en sonunda bir satır ekler (-1, dizin olarak kullanılır):
<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>
Umut ediyorum bu yardım eder.
Ben tavsiye ediyorum
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
aksine
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
first ve last Anahtar kelimeler, başlatılacak ilk veya son etiket üzerinde çalışır, kapalı değil. Bu nedenle, iç içe geçmiş tablonun değiştirilmesini istemiyorsanız, iç içe geçmiş tablolarla daha güzel çalışır, ancak bunun yerine toplam tabloya ekleyin. En azından bulduğum şey bu.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
Bence en hızlı ve net yol
//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>');
burada demo Keman
Ayrıca daha fazla html değişikliği yapmak için küçük bir işlev önerebilirim
//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] : '';
});
}
}());
Dize bestecimi kullanırsanız bunu yapabilirsiniz
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'
}));
İşte demo Keman
Bu, jQuery'nin "last ()" işlevi kullanılarak kolayca yapılabilir.
$("#tableId").last().append("<tr><td>New row</td></tr>");
Tabloda herhangi bir satır olmadığı zaman bu şekilde kullanıyorum, yanı sıra, her satır oldukça karmaşıktır.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
Tıklanan satırdan sonra bir tablo satırı eklemek için ilgili bazı sorunlar yaşıyordum. Sonuncu .after () çağrısı son satır için çalışmıyor dışında tüm iyi.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Çok düzensiz bir çözüm buldum:
aşağıdaki gibi tablo oluşturun (her satır için id):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
vb ...
ve sonra :
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Burada yayınlanan en iyi çözüm için, son satırda yuvalanmış bir tablo varsa, yeni satır ana tablo yerine yuvalanmış tabloya eklenir. Hızlı bir çözüm (tbody içeren / içermeyen ve iç içe geçmiş tablolara sahip tablolar dikkate alınarak):
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);
}
}
Kullanım örneği:
add_new_row('#myTable','<tr><td>my new row</td></tr>');