jQuery'de tablo satırı ekleme

Bir tabloya son satır olarak ek bir satır eklemek için jQuery'deki en iyi yöntem nedir?

Bu kabul edilebilir mi?

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

Bunun gibi bir tabloya ekleyebileceklerinizle ilgili sınırlamalar var mı (girişler, seçimler, satır sayısı gibi)?

Çözüm

Önerdiğiniz yaklaşımın size aradığınız sonucu vereceği garanti değildir - örneğin bir tbody olsaydı ne olurdu?

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

Sonunda aşağıdakileri elde edersiniz:

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

Bu nedenle bunun yerine bu yaklaşımı tavsiye ederim:

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

Yukarıdaki örnekte olduğu gibi birden fazla satır da dahil olmak üzere, geçerli HTML olduğu sürece after() yöntemine her şeyi dahil edebilirsiniz.

Güncelleme: Bu soruyla ilgili son etkinlikten sonra bu yanıtı yeniden gözden geçiriyorum. eyelidlessness, DOM'da her zaman bir tbody olacağı konusunda iyi bir yorum yapıyor; bu doğrudur, ancak yalnızca en az bir satır varsa. Satırınız yoksa, kendiniz bir tane belirtmediğiniz sürece tbody olmayacaktır.

DaRKoN_ suggests son trden sonra içerik eklemek yerine tbodyye ekleme. Bu, satır olmaması sorununu aşar, ancak teorik olarak birden fazla tbody öğesine sahip olabileceğiniz ve satır her birine ekleneceği için hala kurşun geçirmez değildir.

Her şeyi tarttığımda, olası tüm senaryoları hesaba katan tek bir satırlık bir çözüm olduğundan emin değilim. JQuery kodunun biçimlendirmenizle uyumlu olduğundan emin olmanız gerekecektir.

Bence en güvenli çözüm, satırları olmasa bile tablonuzun her zaman en az bir tbody içerdiğinden emin olmaktır. Bu temelde, kaç satırınız olursa olsun çalışacak (ve aynı zamanda birden fazla tbody öğesini hesaba katacak) aşağıdakileri kullanabilirsiniz:

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

Ya bir <tbody> ve bir <tfoot> olsaydı?

Mesela:

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

Ardından yeni satırınızı gövdeye değil, altbilgiye ekleyecektir.

Bu nedenle en iyi çözüm bir <tbody> etiketi eklemek ve .after yerine .append kullanmaktır.

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

Bu harika jQuery tablo satırı ekle işlevini kullanabilirsiniz. Hem <tbody> olan hem de olmayan tablolarda harika çalışır. Ayrıca son tablo satırınızın colspan değerini de dikkate alır.

İşte örnek bir kullanım:

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