Soru JQuery'de tablo satırı ekle


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


2057
2017-10-04 21:33


Menşei


Thxs Kül. Ben de jQuery'yi öğreniyorum ve en iyi yolu, özellikle de basit şeyleri anlamakta zorlanıyorum. 2 soru olmasının nedeni, bir tane yayınladım ve bir saat sonra, bir tanesini diğerine koymam gerektiğini ve ilkini değiştirmem gerektiğini düşündüğümü fark ettim. - Darryl Hein
Bu nedenle: google.com/search?q=jquery+add+table+row - Darryl Hein
FYI - Çoklu ekleri kullanmaktan kaçının (performansı büyük ölçüde yavaşlatır), dizginizi oluşturun veya daha hızlı olan JavaScript birleştirmesini kullanın. - Gerrit Brink
görmek: stackoverflow.com/a/50365764/7186739 - Super Model
Sadece satırın çok karmaşık olması durumunda, yaptığım şey, ilk satırı gerekli yapıyla gizlemek, bir klon yapmak ve metni değiştirmek ve ilk satırdan sonra eklemek, böylece ajax yanıtından veri alırsanız tablonuz oluşturulur, hatırlayın döngünün dışında klonlayın, sonra içeriğin içindeki içeriği değiştirmek için kullanın. $ ("# mainTable tbody") ekle (satır); satır değiştirilmiş klon kopyasıdır :) - Aadam


Cevaplar:


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

1872
2017-10-04 21:49



Bu, tabloda hiç satır yoksa işe yarar mı? - Rama Vadakattu
@Rama, hayır olmaz. Daha iyi bir çözüm olması gerekiyor. - Brian Liang
DOM'de her zaman bir tbody olacak. - eyelidlessness
boş bir tbody, html'nizi doğrulamaz - 2ni
Aksi takdirde güzel bir çözüm için küçük bir iyileştirme, seçicilerin optimize edilmesi olacaktır. Aşağıdaki hız artışlarını alabilirsiniz: $('#myTable').find('tbody:last') yerine $('#myTable > tbody:last'). - Erik Töyrä


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.


699
2017-08-14 15:30



Bunu deneyen kişiler için, parantezlerin yerlerini dikkatlice not edin. Doğru yerleştirme çok önemlidir. - Ryan Lundy
Kapatma etiketleri ne olacak? Gerekli değiller mi? - senfo
Hash sembolü sınıf adını değil, ID'yi gösterdiğinden $ ("# tableClassname") aslında $ ("# tableID") olmamalıdır. - Dave
Birden fazla <td> eklemek istersem, nereye gitmeli? Teşekkürler! - sammiwei
Garip bir zincirden nefret ediyorum. Bu tür şeylerle dolu kodu sürdürmek bir kabus. - bancer


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

276
2018-06-05 20:12



Bu varsayımla dikkatli olun. Ek işaretlemeniz \ n veya \ n \ r ile başlarsa, jQuery bunun bir <tr> olduğunu algılamayacak ve <tablonun> yerine <td> 'e ekleyecektir. Ben bunu, başlangıçta fazladan bir çizgiye sahip olan bir MVC görüntüsü tarafından oluşturulan işaretleme ile karşılaştım. - Mik
@Mik başları için teşekkürler! sanırım yourString.trim() bunu düzeltebilir. - Salman Abbas
Tabi ki, ama bunun hakkında düşünmelisin. Bir tane varsa, <tbody> 'e ekleme alışkanlığını alsanız iyi olur. - Mik
jQuery 3.1 hala bir tbody belirtilmesini gerektirir. Buradan kontrol edin: jsfiddle.net/umaj5zz9/2 - user984003
Bu, sayfamın yenilenmesine neden oluyor. Bunu nasıl önleyebilirim? - Avi


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

147
2018-01-22 06:47



Ayaklarınızı yanlış uyguladınız. Tbody'den önce gelmeli, sonra değil - gör w3.org/TR/html4/struct/tables.html#h-11.2.3. Bu yüzden benim çözümüm, standartları ihlal etmeyi seçmediğiniz sürece (diğer durumlarda da başka şeylerin de yanlış gitmesini beklemediğiniz sürece) çalışır. Benim çözümüm, bir tbody olup olmadığına da bakar, oysa bir tbody yoksa teklifiniz başarısız olur. - Luke Bennett
<Tfoot / >'daki hatalara rağmen, bu daha iyi bir çözümdür. Eğer <tbody /> yoksa, aynı tekniği <table /> üzerinde de kullanabilirsiniz. “Kabul edilen cevap” mevcut bir satır olup olmadığını görmek için ek bir kontrol gerektirir. (OP'nin bu gerekliliği belirtmediğini biliyorum, ama farketmez - bu teknik, bu teknik için bir Google araştırmasında ilk sırada geliyor ve en iyi cevap en üstte değil.) - Clever Human
Bu bulmaktan daha iyi bir çözümdür. Birkaç iterasyonda bu teknik her zaman işe yarıyor gibi görünüyor. Eklenen bir FYI olarak, satırın tablo başlangıcına eklenmesi için .prepend'i kullanabilirsiniz. .Append ise satırın tablonun sonuna koyar. - Lance Cleveland
Bu yanlış, tbody'de her sıraya satır ekleyecektir - garg10may
@ garg10may Nasıl tavsiye edersiniz? Çocuk elemanlarını değil, teyi hedefliyor. - ChadT


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.


49
2018-04-20 17:38



Bu yöntemle ilgili sorun (yeni öğrendiğim gibi) eğer bir altbilgi varsa, altbilgiyi -1 ile dizin olarak ekleyecektir. - kdubs


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>

31
2017-10-22 21:34





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


26
2018-06-30 12:40





Bu, jQuery'nin "last ()" işlevi kullanılarak kolayca yapılabilir.

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

22
2018-01-26 13:34



İyi fikir, ama seçiciyi şu anda #tableId tr olarak değiştirmek istediğinizi düşünürdünüz, tabloyu tablonun altındaki satırı ekleyeceksiniz. - Darryl Hein


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

...

16
2017-12-16 05:30



Teşekkür ederim. Bu çok zarif bir çözümdür. Şablonu ızgarada nasıl tuttuğunu seviyorum. Kodu okumayı ve sürdürmeyi çok daha kolay ve daha kolay hale getirir. Tekrar teşekkürler. - Rodney


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

13
2017-10-05 19:17



Eksik HTML, <tr id = "row1"> </ tr> <tr id = "row2"> </ tr> şeklindedir. - Avron Olshewsky
Bence bu yeni bir soru olmalı, mevcut bir cevap yerine ... - Darryl Hein


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

13
2018-01-21 22:21