JQuery'de tablo satırı ekle

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

Böyle bir tabloya ekleyebileceğiniz sınırlamalar var mı (girişler, seçimler, satır sayısı gibi)?

Önerdiğiniz yaklaşımın size aradığınız sonucu vereceği garanti edilmez - ya da tbodyörneğin:

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

Aşağıdakilerle sonuçlanırsınız:

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

after()Yukarıdaki örneğe göre birden çok satır da dahil olmak üzere , yöntem içinde geçerli HTML olduğu sürece herhangi bir şey ekleyebilirsiniz .

Güncelleme: Bu sorudaki son etkinliklerin ardından bu cevabı tekrar ziyaret etmek göz kapaksızlığı, DOM'da her zaman bir olacağına dair iyi bir yorum yapar tbody; bu doğrudur, ancak sadece en az bir satır varsa. Hiç satırınız yoksa, tbodykendiniz belirtmedikçe hayır olmaz .

DaRKoN_ , sonuncudan tbodysonra içerik eklemek yerine eklenmesini önerirtr . Bu, satır olmaması sorununu çözer, ancak teorik olarak çoklutbody öğeye ve satır her birine ekleneceği için .

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

Bence en güvenli çözüm, hiç satır içermese bile, işaretlemenize tableher zaman en az bir tane eklemenizi sağlamaktır tbody. Bu temelde, sahip olduğunuz birçok satıra (ve ayrıca birden çok tbodyöğeyi hesaba katarak ) sahip olacak olan aşağıdakileri kullanabilirsiniz :

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

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

Tablonuza şöyle bir şey ekleyebilirsiniz:

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

$('<some-tag>')JQuery şey birden sahip bir etiket nesnesidir attrsıra sıra, ayarlanabilir özellikleri ve almak text, burada etiketi arasındaki metni temsil ettiği: <tag>text</tag>.

Bu oldukça garip bir girintidir, ancak bu örnekte neler olduğunu görmeniz daha kolaydır.

@Luke Bennett bu soruya cevap verdiğinden beri işler değişti . İşte bir güncelleme.

jQuery (herhangi birini kullanarak eklemeye çalışıyoruz eleman eğer sürüm 1.4 (?) otomatik olarak algılar beri append(), prepend(), before()veya after()yöntemlerin) bir olduğunu <tr>ilk haline ve ekler onu <tbody>Tablonuzdaki veya yeni içine sarar <tbody>biri yapmazsa var olmak.

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

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

Ya bir <tbody>ve bir varsa <tfoot>?

Gibi:

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

Sonra yeni satırınızı altbilgiye ekler - gövdeye değil.

Dolayısıyla en iyi çözüm bir eklemektir <tbody>etiketi ve kullanılmasını .appendziyade, .after.

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

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

tableObject.insertRow(index)

indexeklenecek satırın konumunu belirten bir tamsayıdır (0 ile başlar). -1 değeri de kullanılabilir; bu da yeni satırın son konuma eklenmesiyle sonuçlanır.

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

Bu parametre atlanırsa, insertRow()Internet Explorer'daki son konuma ve Chrome ve Safari'deki ilk konuma yeni bir satır ekler.

HTML tablosunun kabul edilebilir her yapısı için çalışır.

Aşağıdaki örnek son olarak bir satır ekleyecektir (-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>'); 

firstVe lastilk veya son etiketi üzerinde anahtar kelimeler çalışma kapatıldı, değil başlatılması gerekir. Bu nedenle, iç içe tablonun değiştirilmesini istemiyorsanız, bunun yerine genel tabloya eklemek istiyorsanız, bu iç içe geçmiş tablolarla daha iyi oynar. 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>');

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

Dize bestecimi kullanırsanız bunu şöyle 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 Fiddle

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ığında, her satır oldukça karmaşık olduğunda bu yolu kullanıyorum.

style.css:

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

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

Burada yayınlanan 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 geçmiş tabloya eklenir. Hızlı bir çözüm (tbody ile / tbody olmayan tablolar ve iç içe tabloları olan tablolar dikkate alınır):

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

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>

Tıklanan satırdan sonra bir tablo satırı eklemek çalışırken, ilgili bazı sorunlar yaşıyordum. Son satır için .after () çağrısı çalışmazsa tümü iyi.

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

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

tabloyu aşağıdaki gibi 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);

Bu harika jQuery tablo satırı ekleme işlevini kullanabilirsiniz. Sahip olduğu tablolarla harika çalışıyor<tbody> ve olmayan . Ayrıca son tablo satırınızın colspan'ı da dikkate alır.

İşte bir örnek kullanım:

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

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

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

Neil'in cevabı açık ara en iyisidir. Ancak işler çok hızlı dağılıyor. Benim önerim, öğeleri depolamak ve bunları DOM hiyerarşisine eklemek için değişkenler kullanmaktı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);

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

Javascript işleviyle yazma

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

Bu AddRow eklentisini tablo satırlarını yönetmek için oldukça yararlı buldum . Yine de, sadece yeni bir satır eklemeniz gerekiyorsa Luke'un çözümü en uygun çözüm olacaktır.

İşte bazı hacketi kesmek kodu. Bir HTML sayfasında bir satır şablonu korumak istedim . Tablo satırları 0 ... n istek zamanında oluşturulur ve bu örnekte bir sabit kod satırı ve basitleştirilmiş bir şablon satırı bulunur. Şablon tablosu gizlidir ve satır etiketi geçerli bir tablo içinde olmalıdır, aksi takdirde tarayıcılar bu tabloyu DOM ağacından bırakabilir . Satır eklemek sayaç + 1 tanımlayıcısını kullanır ve geçerli değer data özelliğinde korunur. Her satırın benzersiz URL almasını garanti eder parametreleri .

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

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

Not: Tüm kredileri jQuery ekibine veriyorum; her şeyi hak ediyorlar. JQuery olmadan JavaScript programlama - Bu kabusu düşünmek bile istemiyorum.

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

Sanırım projemde yaptım, 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');
    });
      });
});

Bu benim çözümüm

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

başka bir değişkeniniz varsa <td> bu denemede etikete .

Bu şekilde umarım faydalı olur

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

Ben de bir yol var son olarak satır eklemek veya herhangi bir belirli yer var, bu yüzden ben de paylaşmak gerektiğini düşünüyorum:

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

Konuya iyi bir örnek eklemek için, belirli bir konuma bir satır eklemeniz gerekiyorsa, burada çalışan bir çözüm var.

Ek satır, 5. satırdan sonra veya 5'ten az satır varsa 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 tablonun altındaki hazır (gizli) bir konteynere koydum .. yani siz (veya tasarımcı) değiştirmek zorundaysanız JS'yi düzenlemek gerekmez.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

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

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

yeni bir satır katacak ilk TBODY herhangi bir bağlı olmaksızın, tablo THEADveya TFOOTmevcut. (Hangi jQuery sürümünden bilgi bulamadım.append() Bu davranışın mevcut olduğu .)

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

Hangi örnek a bsatırına ikinci örnekte 1 2değil sonrasına eklenir 3 4. Tablo boşsa, jQuery TBODYyeni bir satır oluşturur .

Datatable JQuery eklentisi 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);

Datatables fnAddData Datatables API'sine bakın

Basit bir şekilde:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Bunu deneyin: çok basit bir yol

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>