35 Soru: JQuery'de tablo satırı ekle

tarafından oluşturulan soru Wed, Dec 30, 2015 12:00 AM

jQuery'deki bir tabloya son satır olarak ek bir satır eklemek için 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 ekleyebileceğiniz kısıtlamalar var mı (girişler, seçimler, satır sayısı gibi)?

    
2259
  1. Thxs Ash. Ben de sadece jQuery'i öğreniyorum ve en iyi yolu, özellikle basit şeyleri bulmakta zorlanıyorum. İki soru olmalarının sebebi, birini gönderdim ve neredeyse bir saat sonra diğerini de koymalıyım ve ilkini değiştirmem gerektiğini düşünmemiştim.
    2008-10-06 05: 53: 41Z
  2. 2009-10-05 22: 54: 16Z
  3. FYI - Birden çok ek kullanmaktan kaçının (performansı büyük ölçüde yavaşlatır), dizenizi oluşturmayı ya da çok daha hızlı olan JavaScript birleşimini kullanmayı tercih edin.
    2010-04-16 09: 32: 40Z
  4. 2018-05-16 08: 24: 34Z
  5. Satır çok karmaşıksa, yaptığım şey, ilk satırın istenen yapıyla gizli kalması, bir klonlama yapılması ve metni değiştirmek ve ilk satırdan sonra eklemek ajax yanıtından veri alırsanız, tablonuz oluşturulacaktır, bunu döngünün dışına klonlamayı unutmayın, daha sonra döngü içindeki içeriği değiştirmek için kullanın. $("# mainTable tbody"). append (satır); satır değiştirilmiş klon kopyasıdır :)
    2018-05-16 12: 00: 18Z
30 Yanıtlar                              30                         

Önerdiğiniz yaklaşımın size aradığınız sonucu vermesi garanti edilmez - örneğin tbody'unuz varsa:

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

Aşağıdakilerle bitirdiniz:

 
<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 örneğe göre birden çok satır dahil olmak üzere, geçerli HTML olduğu sürece after() yönteminin içindeki her şeyi dahil edebilirsiniz.

Güncelleme: Bu soruyla ilgili son etkinliği izleyerek bu yanıtı tekrar ziyaret edin. göz kapağı boşluğu DOM'de her zaman tbody olacağı konusunda iyi bir yorumda bulunur; bu doğrudur, ancak yalnızca en az bir satır varsa. Satırınız yoksa, kendiniz belirtmediyseniz, tbody olmaz.

sondan sonra tbody'a içerik eklemek yerine

DaRKoN_ önerir tr. Bu, satırların olmaması sorununu çözer ancak teorik olarak birden fazla tbody öğeye sahip olabileceğinizden ve her birine satır ekleneceği için hala kurşun geçirmez değildir.

Her şeyi tartarak, her olası senaryoyu açıklayan tek bir satırlık bir çözüm olduğundan emin değilim. JQuery kodunun işaretlemenizle uyumlu olduğundan emin olmanız gerekir.

Bence en güvenli çözüm, table'unuzun sıranızda her zaman en az bir tbody içermesini sağlamaktır. Bu temelde, sahip olduğunuz çok sayıda satırla çalışacak aşağıdakileri kullanabilirsiniz (ve ayrıca birden fazla tbody öğeyi de içerir):

 
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
    
2014
2017-05-23 12: 02: 45Z
  1. Tabloda satır yoksa bu işe yarar mı?
    2009-04-30 04: 47: 41Z
  2. @ Rama, hayır olmaz. Daha iyi bir çözüm olması gerekiyor.
    2009-06-22 14: 21: 01Z
  3. DOM’de her zaman bir kişi olacaktır.
    2009-10-05 19: 20: 51Z
  4. boş bir tbody html'nizi doğrulamaz.
    2010-03-02 21: 21: 53Z
  5. Aksi takdirde iyi bir çözüm için küçük bir gelişme, seçicileri optimize etmek olacaktır. Hız iyileştirmelerini aşağıdakilerle yapabilirsiniz: $('#myTable').find('tbody:last') yerine $('#myTable > tbody:last').
    2012-01-25 12: 48: 52Z

jQuery, anında DOM öğelerini işlemek için yerleşik bir tesise sahiptir.

Masanıza şöyle bir şey ekleyebilirsiniz:

 
$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery'deki $('<some-tag>') konusu, burada etiketlenebilir ve alınabilecek birçok attr özniteliğe ve ayrıca buradaki etiket arasındaki metni temsil eden text'a sahip bir etiket nesnesidir: <tag>text</tag>.

Bu oldukça garip bir girintileme ama bu örnekte neler olup bittiğini görmeniz daha kolay.

    
737
2012-02-29 22: 36: 49Z
  1. Bunu deneyenler için parantezlerin yerlerini dikkatlice not edin. Düzgün yerleştirme çok önemlidir.
    2010-08-09 02: 14: 29Z
  2. Kapanış etiketlerinden ne haber? Gerekli değil mi?
    2011-06-01 15: 33: 36Z
  3. $("# tableClassname"), $("# tableID") olması gerekmez, çünkü karma sembolü kimliğe işaret eder ve sınıf adı değil mi?
    2012-01-13 20: 51: 18Z
  4. Böyle garip zincirlemelerden nefret ediyorum. Bu gibi şeylerle dolu bir kod sağlamak kabus gibi görünüyor.
    2013-02-07 22: 53: 04Z
  5. @ senfo, alt öğelerini ekleyerek bunları otomatik olarak yaratacaktır.
    2013-09-16 09: 39: 28Z

Bu soruyu @Luke Bennett yanıtladığından beri işler değişti. İşte bir güncelleme.

1.4 (?) sürümünden bu yana jQuery, eklemeye çalıştığınız öğenin otomatik olarak algılanmasını sağlar ( append() , prepend() , before() veya after() yöntemleri) bir <tr> ve tablonuzdaki ilk <tbody>'a ekler veya yoksa, yeni bir <tbody>'a sarılır.

Yani evet, örnek kodunuz kabul edilebilir ve jQuery 1.4+ ile iyi çalışacaktır. ;)

 
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
    
294
2017-05-23 12: 26: 38Z
  1. Bu varsayıma dikkat edin. Eklenen işaretlemeniz \n veya \n \r ile başlıyorsa, jQuery bunun bir < tr > ve bunu < table > ve < tbody > Bunun yanında, başında fazladan bir satır bulunan MVC görünümünün oluşturduğu biçimlendirme ile karşılaştım.
    2016-11-25 09: 52: 51Z
  2. @ Mik teşekkürler! Sanırım yourString.trim() bunu çözebilir.
    2016-11-25 10: 00: 58Z
  3. Elbette, ama düşünmelisiniz. Daha iyi, < tbody > bir tane olduğunu biliyorsanız.
    2016-11-25 10: 25: 56Z
  4. jQuery 3.1 hala bir tbody belirtilmesini gerektiriyor. Buradan kontrol edin: jsfiddle.net/umaj5zz9/2
    2017-04-20 16: 15: 47Z
  5. Bu, sayfamın yenilenmesine neden oluyor. Bunu nasıl önleyebilirim?
    2018-07-31 14: 02: 58Z

Peki ya <tbody> ve <tfoot> varsa?

Mesela:

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

Sonra yeni sıranızı altbilgiye ekler - vücuda değil.

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

 
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
    
159
2016-01-19 10: 18: 04Z
  1. Ayağını yanlış uyguladın. Tbody'in önüne gelmeli, sonra değil - bkz. w3 .org /TR /html4 /struct /tables.html # h-11.2.3 . Bu nedenle benim çözümüm, standartları çiğnemeyi seçmediğiniz sürece hala çalışır (bu durumda başka şeylerin de yanlış gitmesini bekleyebilirsiniz). Benim çözümüm aynı zamanda bir arkadaşın olup olmadığına da çalışır, oysaki bir teklif yoksa, teklifin başarısız olur.
    2009-06-23 10: 24: 01Z
  2. < tfoot /> 'daki hatalara rağmen, bu daha iyi bir çözüm. Hiç kimse yoksa, < tbody /> aynı tekniği < table /> kendisi. Oysa "kabul edilen cevap" mevcut bir satır olup olmadığını görmek için ek bir kontrol gerektirir. (OP'nin bu gereksinimi belirtmediğini biliyorum, ancak önemli değil - bu yayın bu teknik için Google'da bir aramada ilk sırada yer alıyor ve en iyi cevap en tepede değil.)
    2009-07-13 14: 49: 06Z
  3. Bu, bulmaktan daha iyi bir çözümdür. Birkaç yinelemede, bu teknik her zaman işe yaramaktadır. Ek bir FYI olarak, satırı tablonun başına eklemek için .prepend kullanabilirsiniz, oysa .append satırı tablonun sonuna koyar.
    2012-01-03 19: 09: 14Z
  4. Bu yanlış, tbody içindeki her satıra satır ekleyecektir
    2017-11-06 14: 21: 48Z
  5. @ garg10may Nasıl öneriyorsunuz? Herhangi bir alt öğeyi değil, kişiyi hedefliyor.
    2017-11-07 00: 14: 46Z

Bir jQuery yöntemi istediğini biliyorum. Çokça baktım ve doğrudan JavaScript'i kullanmaktan daha iyi bir şekilde yapabileceğimizi öğrendim.

 
tableObject.insertRow(index)

index, eklenecek satırın konumunu belirten bir tamsayıdır (0'dan başlar). -1 değeri de kullanılabilir; ki bu da yeni satırın son konuma eklenmesine neden olur.

Bu parametre Firefox’ta ve Opera 'da gereklidir, ancak isteğe bağlıdır Internet Explorer’da Chrome ve Safari .

Bu parametre belirtilmezse, insertRow(), Internet Explorer'da en son konumuna ve Chrome ve Safari'de ilk konumuna yeni bir satır ekler.

İşe yarayacakveya HTML tablosunun kabul edilebilir her yapısı.

Aşağıdaki örnek en sonda 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>

Umarım yardımcı olur.

    
58
2019-02-03 18: 18: 50Z
  1. bu yöntemle ilgili sorun (az önce bildiğim gibi), eğer bir altbilginiz varsa, altbilgiyi dizinli olarak AFER'den sonra ekleyecektir.
    2012-12-05 03: 11: 28Z

öneririm

 
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

aksine

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

first ve last anahtar sözcükleri, başlatılmayan ilk veya son etiket üzerinde çalışır, kapanmaz. Bu nedenle, iç içe geçmiş tablonun değişmesini istemiyorsanız, bunun yerine genel tabloya eklemek istiyorsanız, iç içe geçmiş tablolarla daha iyi oynar. En azından bulduğum şey buydu.

 
<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>
    
34
2011-09-29 05: 34: 26Z

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: Fiddle

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

String 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

    
32
2015-11-17 12: 09: 30Z
  1. Birden fazla tbody'unuz varsa, birden fazla ek alabilirsiniz
    2018-10-05 20: 17: 32Z
  2. Evet yapabilirsiniz :) Etiket koleksiyonunuzu sınırlandırmak için $("SELECTOR").last()'u deneyebilirsiniz
    2018-10-08 12: 50: 31Z

Bu, jQuery'nin "last ()" işlevini kullanarak kolayca yapılabilir.

 
$("#tableId").last().append("<tr><td>New row</td></tr>");
    
23
2010-01-26 17: 12: 29Z
  1. İyi fikir, ancak seçiciyi şu anda #tableId tr olarak değiştirmek isteyeceğinizi düşünüyorum, tablonun tablonun altındaki satırı eklemesini sağlayabilirsiniz.
    2010-01-26 17: 13: 08Z

    Tabloda herhangi bir satır olmadığında bu şekilde kullanıyorum, ayrıca her satır oldukça karmaşık.

    style.css:

     
    ...
    #templateRow {
      display:none;
    }
    ...
    

    xxx.html

     
    ...
    <tr id="templateRow"> ... </tr>
    ...
    
    $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
    
    ...
    
        
    17
    2010-12-16 05: 30: 14Z
    1. Teşekkürler. Bu çok zarif bir çözüm. Şablonu ızgara içinde nasıl tuttuğunu seviyorum. Kodu okumak ve bakımı çok daha basit ve kolaydır. Tekrar teşekkürler.
      2015-12-26 21: 33: 54Z

    Buraya gönderilen en iyi çözüm için, son satırda iç içe geçmiş bir tablo varsa, yeni satır ana tablo yerine iç içe tabloya eklenir. Hızlı bir çözüm (gövdeli ve gövdesiz masalar ve iç içe masalar içeren masalar 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>');
    
        
    14
    2015-11-12 02: 21: 51Z

    Tıklanan satırdan sonra bir tablo satırı eklemeye çalışırken ilgili bazı sorunlar yaşıyordum. .After () çağrısı son satır için işe yaramazsa hariç her şey yolunda.  

    $('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
    

    Çok düzensiz bir çözüm buldum:

    tabloyu şu şekilde oluşturun (her satır için id):

     
    <tr id="row1"> ... </tr>
    <tr id="row2"> ... </tr>
    <tr id="row3"> ... </tr>
    

    etc ...

    ve sonra:

     
    $('#traffic tbody').find('tr.trafficBody' + idx).after(html);
    
        
    13
    2013-06-26 14: 20: 22Z
    1. Eksik HTML: < tr id = "row1" > Ve m /tr > < tr id = "row2" > Ve m /tr > böylece ..
      2009-10-05 19: 18: 20Z
    2. Bunun mevcut bir cevap yerine yeni bir soru olması gerektiğini düşünüyorum ...
      2009-10-05 19: 35: 14Z

    Bu şekilde çözdüm.

    Jquery kullanma

     
    $('#tab').append($('<tr>')
        .append($('<td>').append("text1"))
        .append($('<td>').append("text2"))
        .append($('<td>').append("text3"))
        .append($('<td>').append("text4"))
      )
    

    Pasaj

     
    $('#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>
        
    13
    2019-01-24 09: 27: 04Z
    1. Şimdi yeni bir satırda dinamik verileri başarıyla ekleyebilirim, ancak bu yöntemi kullandıktan sonra, özel filtrem çalışmıyor. Bunun için herhangi bir çözümünüz var mı? T hank Eğer
      2019-01-25 05: 28: 05Z
    2. Bir çeşit güncelleme fonksiyonunu çağırmanız gerektiğini düşünüyorum. Örnek olmadan anlatmak üzereyim.
      2019-01-25 06: 22: 01Z
    3. yanıttaki en iyisidir ... teşekkür ederim
      2019-04-11 05: 30: 53Z

    Bu harika hatayı kullanabilirsiniz jQuery tablo satırı ekle işlevi. <tbody> olan ve olmayan masalarda harika çalışıyor. Ayrıca, son tablo sıranızın mahzeni dikkate alır.

    İşte örnek bir kullanım:

     
    // One table
    addTableRow($('#myTable'));
    // add table row to number of tables
    addTableRow($('.myTables'));
    
        
    11
    2009-03-02 13: 21: 48Z
    1. Bunun çok faydalı olduğunu göremiyorum. Tek yaptığı tabloya boş bir tablo satırı eklemek. Genellikle, her zaman değilse, içinde bazı veriler bulunan yeni bir tablo satırı eklemek istersiniz.
      2009-03-02 17: 48: 14Z
    2. Ancak genellikle istediğiniz şey budur. Bu işlev, ne kadar sütun ve satır aralığı bulunduğuna bakılmaksızın, tablolarınıza herhangi bir boş satır eklemenizi sağlar, böylece UNIVERSAL işlevi yapar. Oradan örneğin $('. Tbl tr: last td') ile devam edebilirsiniz. Bütün mesele evrensel bir işleve sahip olmaktır !!!
      2009-03-04 04: 15: 54Z
    3. İşleviniz yeni satırlarınıza da veri eklerse, bir sonraki projenizde bir dahaki sefere kullanamazsınız. Amaç ne?! Ancak benim görüşüme göre paylaşmanıza gerek yok ...
      2009-03-04 04: 19: 02Z
    4. Ortak bir paketin parçası olmayan işlevi önerirseniz, lütfen tam işlev kodunu buraya yerleştirin. Teşekkürler.
      2015-09-16 05: 38: 28Z

    Benim çözümüm:

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

    kullanımı:

     
    $('#Table').addNewRow(id1);
    
        
    10
    2013-03-30 05: 46: 51Z
    1. yani, tabloda tbody yoksa ne olur .. ?? herhangi bir başlık olmasa bile, doğrudan <table> öğesinin içinde satır olabileceği anlamına gelir.
      2012-05-18 11: 37: 37Z
    2. İşaretlemenizi < TBody > bu nedenle, HTML 5 standartlarına kadar, o zaman olmasa bile her zaman $(this) yapabilirsiniz .append ('< tr id = "' + rowId + '" > < /tr >'); bu sadece tabloya bir satır ekler.
      2012-05-22 22: 07: 02Z
    3. Sanırım bunu bir işlev yapacaksanız, yeni satır için bir jQuery nesnesi döndürebilir, böylece zincirlenebilir hale gelir.
      2013-12-22 19: 53: 31Z
     
        // 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);
    
        
    10
    2015-12-06 05: 39: 20Z
    1. Bu bir cevap olsa da, daha sonra bir ziyaretçi için pek kullanışlı değildir ... Lütfen cevabınıza bir açıklama ekleyin.
      2015-12-06 05: 23: 29Z

    Neil'in cevabı en iyisidir. Ancak işler çok çabuk dağınık oluyor. Önerim, öğeleri saklamak ve bunları DOM hiyerarşisine eklemek için değişkenleri kullanmak olacaktır.

    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
    2017-05-23 12: 34: 45Z
     
    <table id="myTable">
      <tbody>
        <tr>...</tr>
        <tr>...</tr>
      </tbody>
      <tr>...</tr>
    </table>
    

    Bir javascript işleviyle yazın

     
    document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
    
        
    8
    2016-01-19 20: 09: 33Z

    Bu tabloyu AddRow eklentisini oldukça faydalı buldum. Yine de, yeni bir satır eklemeniz gerekirse, Luke’un çözümü en uygun çözüm olacaktır.

        
    8
    2017-05-23 12: 10: 41Z

    İşte bazı hacketi hack kodu. Bir satır şablonunu HTML sayfasında tutmak istedim. Tablo satırları 0 ... n, istenildiği zaman oluşturulur ve bu örnekte, bir kodlanmış satır ve basitleştirilmiş bir şablon satırı vardır. Şablon tablosu gizlidir ve satır etiketi geçerli bir tabloda olmalıdır veya tarayıcılar bunu DOM ağaç. Bir satır eklemek, sayaç + 1 tanımlayıcısını kullanır ve geçerli değer, veri özelliğinde korunur. Her satırın benzersiz olmasını garanti eder URL parametreleri.

    Internet Explorer 8’de testler yaptım,Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 ( Symbian 3), Android hisse senedi ve Firefox beta tarayıcıları.

     
    <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: Tüm kredileri jQuery ekibine veriyorum; her şeyi hakediyorlar. JQuery olmadan JavaScript programlama - Bu kabusu düşünmek bile istemiyorum.

        
    7
    2013-03-30 05: 55: 35Z
     
    <tr id="tablerow"></tr>
    
    $('#tablerow').append('<tr>...</tr><tr>...</tr>');
    
        
    7
    2013-12-21 11: 54: 45Z

    Projemde yaptığımı tahmin ediyorum, işte burada:

    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
    2015-04-17 16: 36: 47Z

    Bu benim çözümüm

     
    $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
    
        
    7
    2017-07-20 02: 34: 42Z

    Sonunda veya belirli bir yerde satır ekleyebildiğim için de bunu paylaşmam gerektiğini düşünüyorum:

    İlk önce uzunluğu veya satırları bulun:

     
    var r=$("#content_table").length;
    

    ve ardından satırınızı eklemek için aşağıdaki kodu kullanın:

     
    $("#table_id").eq(r-1).after(row_html);
    
        
    6
    2013-05-20 09: 14: 50Z

    Konuyla ilgili iyi bir örnek eklemek için, belirli bir konuma bir satır eklemeniz gerekirse işte size çözüm.

    Ekstra satır 5. satırdan sonra veya 5 satırdan azsa tablonun sonuna eklenir.

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

    İçeriği masanın altındaki hazır (gizli) bir kaba koydum .. yani siz (veya tasarımcı) değiştirmek zorundaysanız, JS'nin düzenlenmesi gerekmiyor.

     
    <table id="banner_holder" style="display:none;"> 
        <tr>
            <td colspan="3">
                <div class="wide-banner"></div>
            </td>   
        </tr> 
    </table>
    
        
    6
    2013-08-29 11: 35: 58Z
     
    <table id=myTable>
        <tr><td></td></tr>
        <style="height=0px;" tfoot></tfoot>
    </table>
    

    Altbilgi değişkenini önbelleğe alabilir ve DOM'a erişimi azaltabilirsiniz (Not: altbilgi yerine sahte bir satır kullanmak daha iyi olabilir).

     
    var footer = $("#mytable tfoot")
    footer.before("<tr><td></td></tr>")
    
        
    6
    2015-04-17 16: 37: 05Z

    başka bir değişkeniniz varsa, bunun gibi <td> etiketinde erişebilirsiniz.

    Bu şekilde yardımcı olacağını umuyorum

     
    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
    2017-09-15 11: 00: 06Z
     
    $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
    

    , mevcut TBODY veya THEAD’a bağlı olmadan, tablonun ilk TFOOT’una yeni bir satır ekler. (Bu davranış jQuery .append()'un hangi sürümünün mevcut olduğuna dair bilgi bulamadım.)

    Bu örneklerde deneyebilirsiniz:

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

    Bu örnekte, a b satırının 1 2'dan sonra, ikinci örnekte 3 4'dan sonra eklenmemesi. Tablo boşsa, jQuery yeni bir satır için TBODY oluşturur.

        
    5
    2012-04-19 10: 53: 35Z

    Datatable JQuery eklentisini kullanıyorsanız deneyebilirsiniz.

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

    Veri Tablolarına Bakın fnAddData Datatables API

        
    5
    2013-10-02 05: 06: 13Z

    Basit bir şekilde:

     
    $('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
    
        
    5
    2015-06-16 12: 11: 44Z
    1. Lütfen verdiğiniz çözümle ilgili biraz daha açıklama ekleyerek daha fazla cevap verebilir misiniz?
      2015-06-16 13: 09: 48Z

    row ilk çocuğundan önce <tr> eklemek istiyorsanız.

     
    $("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
    

    Son çocuktan row’dan sonra <tr> eklemek istiyorsanız.

     
    $("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
    
        
    3
    2017-03-16 09: 07: 45Z
kaynak yerleştirildi İşte