Aggiungi la riga della tabella in jQuery

Qual è il metodo migliore in jQuery per aggiungere una riga aggiuntiva a una tabella come ultima riga?

È accettabile?

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

Esistono limiti a ciò che è possibile aggiungere a una tabella come questa (come input, selezioni, numero di righe)?

L'approccio che suggerisci non è garantito per darti il ​​risultato che stai cercando - e se avessi un tbodyesempio:

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

Si finirebbe con il seguente:

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

Raccomanderei quindi questo approccio invece:

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

Puoi includere qualsiasi cosa all'interno del after()metodo purché sia ​​un codice HTML valido, incluse più righe come nell'esempio sopra.

Aggiornamento: rivisitare questa risposta a seguito di attività recenti con questa domanda. la mancanza di palpebre fa un buon commento sul fatto che ci sarà sempre un tbodynel DOM; questo è vero, ma solo se c'è almeno una riga. Se non hai righe, non ci sarà a tbodymeno che tu non ne abbia specificato uno tu stesso.

DaRKoN_ suggerisce di aggiungere al tbodypiuttosto che aggiungere contenuti dopo l'ultimo tr. Ciò aggira il problema di non avere righe, ma non è ancora a prova di proiettile poiché in teoria potresti avere più tbodyelementi e la riga verrebbe aggiunta a ciascuno di essi.

Valutando tutto, non sono sicuro che esista un'unica soluzione a una riga che rappresenti ogni singolo scenario possibile. Dovrai assicurarti che il codice jQuery corrisponda al tuo markup.

Penso che la soluzione più sicura sia probabilmente quella di tableincluderne sempre almeno uno tbodynel markup, anche se non ha righe. Su questa base, puoi utilizzare quanto segue che funzionerà indipendentemente dal numero di righe che hai (e anche tenere conto di più tbodyelementi):

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

jQuery ha una funzione integrata per manipolare gli elementi DOM al volo.

Puoi aggiungere qualsiasi cosa al tuo tavolo in questo modo:

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

La $('<some-tag>')cosa in jQuery è un oggetto tag che può avere diversi attrattributi che possono essere impostati e ottenere, così come text, che rappresenta il testo tra il tag: <tag>text</tag>.

Si tratta di un rientro piuttosto strano, ma è più facile per te vedere cosa sta succedendo in questo esempio.

Quindi le cose sono cambiate da quando @Luke Bennett ha risposto a questa domanda. Ecco un aggiornamento

jQuery dalla versione 1.4 (?) rileva automaticamente se l'elemento che si sta tentando di inserire (utilizzando una delle append(), prepend(), before(), o after()metodi) è una <tr>e l'inserisce nella prima <tbody>nella tabella o avvolge in un nuovo <tbody>, se uno non lo fa esistere.

Quindi sì, il tuo codice di esempio è accettabile e funzionerà bene con jQuery 1.4+. ;)

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

E se avessi un <tbody>e un <tfoot>?

Ad esempio:

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

Quindi inserirà la nuova riga nel piè di pagina, non nel corpo.

Quindi la soluzione migliore è includere un <tbody>tag e usare .append, piuttosto che .after.

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

So che hai chiesto un metodo jQuery. Ho guardato molto e ho scoperto che possiamo farlo in un modo migliore rispetto all'uso di JavaScript direttamente dalla seguente funzione.

tableObject.insertRow(index)

indexè un numero intero che specifica la posizione della riga da inserire (inizia da 0). Il valore di -1 può anche essere usato; il che comporta che la nuova riga verrà inserita nell'ultima posizione.

Questo parametro è richiesto in Firefox e Opera , ma è facoltativo in Internet Explorer, Chrome e Safari .

Se questo parametro viene omesso, insertRow()inserisce una nuova riga nell'ultima posizione in Internet Explorer e nella prima posizione in Chrome e Safari.

Funzionerà per ogni struttura accettabile della tabella HTML.

L'esempio seguente inserirà una riga nell'ultimo (-1 viene utilizzato come indice):

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

Spero possa essere d'aiuto.

io raccomando

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

al contrario di

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

Le parole chiave firste lastfunzionano sul primo o sull'ultimo tag da avviare, non chiuso. Pertanto, questo funziona meglio con le tabelle nidificate, se non si desidera modificare la tabella nidificata, ma invece si aggiunge alla tabella generale. Almeno, questo è quello che ho trovato.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

Secondo me il modo più veloce e chiaro è

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

ecco la demo Fiddle

Inoltre posso consigliare una piccola funzione per apportare ulteriori modifiche html

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

Se usi il mio compositore di archi puoi farlo in questo modo

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

Ecco demo Fiddle

Questo può essere fatto facilmente usando la funzione "last ()" di jQuery.

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

Sto usando questo modo quando non ci sono righe nella tabella, così come ogni riga è piuttosto complicata.

style.css:

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

xxx.html

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

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

...

Per la migliore soluzione pubblicata qui, se nell'ultima riga è presente una tabella nidificata, la nuova riga verrà aggiunta alla tabella nidificata anziché alla tabella principale. Una soluzione rapida (considerando le tabelle con / senza tbody e le tabelle con tabelle nidificate):

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

Esempio di utilizzo:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

L'ho risolto in questo modo.

Usando jquery

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

Frammento

$('#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>

Stavo riscontrando alcuni problemi correlati, cercando di inserire una riga della tabella dopo la riga selezionata. Va tutto bene tranne la chiamata .after () non funziona per l'ultima riga.

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

Sono arrivato con una soluzione molto disordinata:

crea la tabella come segue (id per ogni riga):

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

eccetera ...

e poi :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

È possibile utilizzare questa eccezionale funzione di riga della tabella jQuery add . Funziona benissimo con tavoli che hanno <tbody>e che non lo fanno. Inoltre prende in considerazione il colspan dell'ultima riga della tabella.

Ecco un esempio di utilizzo:

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

La mia soluzione:

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

utilizzo:

$('#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);

La risposta di Neil è di gran lunga la migliore. Tuttavia, le cose diventano molto difficili. Il mio suggerimento sarebbe di usare le variabili per memorizzare gli elementi e aggiungerli alla gerarchia DOM.

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>

Scrivi con una funzione JavaScript

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

Ho trovato questo plugin AddRow abbastanza utile per gestire le righe della tabella. Tuttavia, la soluzione di Luke sarebbe la soluzione migliore se hai solo bisogno di aggiungere una nuova riga.

Ecco un po 'di codice hacketi hacketi. Volevo mantenere un modello di riga in una pagina HTML . Le righe di tabella 0 ... n vengono visualizzate al momento della richiesta e questo esempio ha una riga codificata e una riga modello semplificata. La tabella dei modelli è nascosta e il tag di riga deve trovarsi all'interno di una tabella valida oppure i browser potrebbero rilasciarlo dall'albero DOM . L'aggiunta di una riga utilizza l'identificatore counter + 1 e il valore corrente viene mantenuto nell'attributo data. Garantisce che ogni riga ottenga un URL univoco parametri .

Ho eseguito test su Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (con Symbian 3), Android stock e Firefox beta browser.

<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: do tutti i crediti al team di jQuery; meritano tutto. Programmazione JavaScript senza jQuery - Non voglio nemmeno pensare a quell'incubo.

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

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

Immagino di averlo fatto nel mio progetto, eccolo qui:

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

Questa è la mia soluzione

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

se hai un'altra variabile puoi accedere a <td>tag come quello prova.

In questo modo spero che sarebbe utile

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

Dato che ho anche un modo per aggiungere la riga alla fine o in qualsiasi luogo specifico, quindi penso che dovrei anche condividere questo:

Per prima cosa scopri la lunghezza o le righe:

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

e quindi utilizzare il codice seguente per aggiungere la riga:

$("#table_id").eq(r-1).after(row_html);

Per aggiungere un buon esempio sull'argomento, ecco una soluzione funzionante se è necessario aggiungere una riga in una posizione specifica.

La riga aggiuntiva viene aggiunta dopo la 5a riga o alla fine della tabella se sono presenti meno di 5 righe.

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

Ho messo il contenuto su un contenitore pronto (nascosto) sotto il tavolo .. quindi se tu (o il designer) devi cambiare non è necessario modificare il JS.

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

È possibile memorizzare nella cache la variabile piè di pagina e ridurre l'accesso al DOM (Nota: potrebbe essere meglio usare una riga falsa anziché piè di pagina).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

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

aggiungerà una nuova riga alla prima TBODY della tabella, senza dipendere da nessuna THEADo TFOOTpresente. (Non ho trovato informazioni da quale versione di jQuery .append()è presente questo comportamento.)

Puoi provarlo in questi esempi:

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

In quale a briga di esempio viene inserita dopo 1 2, non dopo 3 4nel secondo esempio. Se la tabella era vuota, jQuery crea TBODYper una nuova riga.

Se stai usando il plugin Datatable JQuery puoi provare.

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

Consultare Datatables fnAddData Datatables API

In modo semplice:

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

Prova questo: un modo molto semplice

$('<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>