Vraag Tabelrij toevoegen in jQuery


Wat is de beste methode in jQuery om een ​​extra rij toe te voegen aan een tabel als de laatste rij?

Is dit acceptabel?

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

Zijn er beperkingen aan wat u aan een tabel zoals deze kunt toevoegen (zoals invoer, selectie, aantal rijen)?


2050
2017-10-04 21:33


oorsprong


antwoorden:


Het is niet gegarandeerd dat de benadering die u voorstelt, u het resultaat geeft waarnaar u op zoek bent - wat als u een tbody bijvoorbeeld:

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

Je zou eindigen met het volgende:

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

Daarom zou ik deze aanpak in de plaats daarvan aanbevelen:

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

U kunt alles opnemen binnen de after() methode zolang het geldige HTML is, inclusief meerdere rijen zoals in het bovenstaande voorbeeld.

Bijwerken: Dit antwoord opnieuw bekijken na recente activiteit met deze vraag. ooglidstilheid maakt een goede opmerking dat er altijd een zal zijn tbody in de DOM; dit is waar, maar alleen als er tenminste één rij is. Als u geen rijen heeft, is er geen tbody tenzij u er zelf een hebt gespecificeerd.

DaRKoN_ suggereert toevoegen aan de tbody in plaats van het toevoegen van inhoud na de laatste tr. Dit krijgt te maken met het probleem geen rijen te hebben, maar is nog steeds niet kogelvrij zoals je in theorie meerdere zou kunnen hebben tbody elementen en de rij zou aan elk van hen worden toegevoegd.

Door alles in te schatten, ben ik er niet zeker van dat er een enkele oplossing met één regel is die voor elk mogelijk scenario verantwoordelijk is. U moet ervoor zorgen dat de jQuery-code overeenstemt met uw markup.

Ik denk dat de veiligste oplossing waarschijnlijk is om je te verzekeren table bevat altijd minstens één tbody in uw markup, ook als deze geen rijen heeft. Op basis hiervan kunt u het volgende gebruiken, dat echter zoveel rijen zal werken (en ook rekening houden met meerdere tbody elementen):

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

1863
2017-10-04 21:49



jQuery heeft een ingebouwde functie om DOM-elementen on the fly te manipuleren.

U kunt zoiets toevoegen aan uw tabel:

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

De $('<some-tag>') ding in jQuery is een tag-object dat meerdere kan bevatten attr attributen die kunnen worden ingesteld en krijgen, evenals text, die de tekst hier tussen de tag vertegenwoordigt: <tag>text</tag>.

Dit is een paar rare inspringen, maar het is gemakkelijker voor u om te zien wat er in dit voorbeeld aan de hand is.


697
2017-08-14 15:30



Dus de dingen zijn sindsdien veranderd @Luke Bennett beantwoordde deze vraag. Hier is een update.

jQuery sinds versie 1.4 (?) detecteert automatisch of het element dat u probeert in te voegen (met een van de append(), prepend(), before()of after() methoden) is een <tr> en voegt het in de eerste in <tbody> in je tafel of wikkelt het in een nieuwe <tbody> als er een niet bestaat.

Dus ja, je voorbeeldcode is acceptabel en werkt prima met jQuery 1.4+. ;)

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

274
2018-06-05 20:12



Wat als je een <tbody> en een <tfoot>?

Zoals:

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

Dan zou het je nieuwe rij invoegen in de voettekst - niet in het lichaam.

Daarom is de beste oplossing om een <tbody> tag en gebruik .append, liever dan .after.

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

147
2018-01-22 06:47



Ik weet dat je om een ​​jQuery-methode hebt gevraagd. Ik heb veel gekeken en ontdek dat we het op een betere manier kunnen doen dan direct JavaScript te gebruiken met de volgende functie.

tableObject.insertRow(index)

indexis een geheel getal dat de positie aangeeft van de rij die moet worden ingevoegd (begint bij 0). De waarde -1 kan ook worden gebruikt; wat ertoe leidt dat de nieuwe rij op de laatste positie wordt ingevoegd.

Deze parameter is vereist in Firefox en Opera, maar het is optioneel in Internet Explorer, Chrome en Safari.

Als deze parameter wordt weggelaten, insertRow() voegt een nieuwe rij in op de laatste positie in Internet Explorer en op de eerste positie in Chrome en Safari.

Het werkt voor elke acceptabele structuur van de HTML-tabel.

In het volgende voorbeeld wordt een rij als laatste ingevoegd (-1 wordt gebruikt als index):

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

Ik hoop dat het helpt.


48
2018-04-20 17:38



ik raad aan

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

in tegenstelling tot

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

De first en last sleutelwoorden werken op de eerste of laatste tag die moet worden gestart, niet gesloten. Daarom speelt dit mooier af met geneste tabellen, als u niet wilt dat de geneste tabel wordt gewijzigd, maar in plaats daarvan wordt toegevoegd aan de algehele tabel. Tenminste, dit is wat ik vond.

<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



Naar mijn mening is de snelste en duidelijkste manier

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

hier is demo Viool

Ook kan ik een kleine functie aanbevelen om meer html-wijzigingen aan te brengen

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

Als u mijn strijkerscomponist gebruikt, kunt u dit doen

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

Hier is demo Viool


26
2018-06-30 12:40



Dit kan eenvoudig worden gedaan met behulp van de "last ()" -functie van jQuery.

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

21
2018-01-26 13:34



Ik gebruik deze manier wanneer er geen rij in de tabel is, en elke rij vrij ingewikkeld is.

style.css:

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

xxx.html

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

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

...

16
2017-12-16 05:30



Ik had wat gerelateerde problemen, ik probeerde een rij met tabellen in te voegen na de rij waarop werd geklikt. Alles is goed, behalve dat de .after () -oproep niet werkt voor de laatste rij.

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

Ik belandde met een zeer slordige oplossing:

maak de tabel als volgt (id voor elke rij):

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

enz ...

en dan :

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

13
2017-10-05 19:17



Voor de beste hier geposte oplossing, als er een geneste tabel op de laatste rij is, wordt de nieuwe rij toegevoegd aan de geneste tabel in plaats van de hoofdtabel. Een snelle oplossing (rekening houdend met tabellen met / zonder tbody en tabellen met geneste tabellen):

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

Gebruik voorbeeld:

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

13
2018-01-21 22:21