Domanda Aggiungi la riga della tabella in jQuery


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

È accettabile?

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

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


2050
2017-10-04 21:33


origine


risposte:


L'approccio che suggerisci non è garantito per darti il ​​risultato che stai cercando - cosa succede se ne hai uno tbody per esempio:

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

Pertanto raccomanderei questo approccio:

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

Puoi includere qualsiasi cosa all'interno di after() metodo fino a quando è valido HTML, incluse più righe come nell'esempio sopra.

Aggiornare: Rivedere questa risposta dopo l'attività recente con questa domanda. l'assenza di palpebre fa un buon commento che ci sarà sempre un tbody nel DOM; questo è vero, ma solo se c'è almeno una riga. Se non hai righe, non ci saranno tbody a meno che tu non ne abbia specificato uno tu.

DaRKoN_ suggerisce aggiungendo al tbody piuttosto che aggiungere contenuti dopo l'ultimo tr. Questo aggira il problema di non avere file, ma non è ancora a prova di proiettile come teoricamente si può avere multiplo tbody gli elementi e la riga verrebbero aggiunti a ciascuno di essi.

Considerando tutto sommato, non sono sicuro che esista un'unica soluzione a una linea che conti per ogni singolo scenario possibile. Dovrai assicurarti che il codice jQuery corrisponda al tuo markup.

Penso che la soluzione più sicura sia probabilmente quella di garantire il tuo table include sempre almeno uno tbody nel tuo markup, anche se non ha righe. Su questa base, puoi usare quanto segue che funzionerà su molte righe che hai (e anche per conto di più tbody elementi):

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

1863
2017-10-04 21:49



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

Puoi aggiungere qualsiasi cosa alla tua tabella in questo modo:

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

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

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


697
2017-08-14 15:30



Quindi le cose sono cambiate da allora @ Luca 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 uno qualsiasi dei append(), prepend(), before(), o after() metodi) è a <tr> e lo inserisce nel primo <tbody> nel tuo tavolo o lo avvolge in un nuovo <tbody> se uno non esiste

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

274
2018-06-05 20:12



E se tu avessi un <tbody> e a <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 a <tbody> tag e usa .append, piuttosto che .after.

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

147
2018-01-22 06:47



So che hai chiesto un metodo jQuery. Ho guardato molto e ho trovato che possiamo farlo in un modo migliore rispetto all'utilizzo 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 utilizzato; il risultato è che la nuova riga verrà inserita nell'ultima posizione.

Questo parametro è richiesto in Firefox e musica lirica, ma è facoltativo in Internet Explorer, Cromo e Safari.

Se questo parametro è omesso, insertRow() inserisce una nuova riga nell'ultima posizione di 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 è usato 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.


48
2018-04-20 17:38



io raccomando

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

al contrario di

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

Il first e last le parole chiave funzionano 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 aggiungerla 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>

31
2017-10-22 21:34



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 Violino

Inoltre posso consigliare una piccola funzione per apportare più 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 d'archi puoi farlo

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 la demo Violino


26
2018-06-30 12:40



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

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

21
2018-01-26 13:34