Comment insérer une ligne dans un corps de tableau HTML en JavaScript

135

J'ai un tableau HTML avec un en-tête et un pied de page:

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

J'essaye d'ajouter une ligne tbodyavec ce qui suit:

myTable.insertRow(myTable.rows.length - 1);

mais la ligne est ajoutée dans la tfootsection.

Comment insérer tbody?

javascript html html-table insert row Jérôme Verstrynge
la source
Tutoriel w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow
Pandiyan Cool

Réponses:

216

Si vous souhaitez ajouter une ligne dans le tbody, obtenez une référence et ajoutez-la ici.

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow();

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);

// Append a text node to the cell
var newText  = document.createTextNode('New row');
newCell.appendChild(newText);

Une démo fonctionnelle est ici . Vous pouvez également consulter la documentation insertRow ici .

Jonathan Naguin
la source
3
Mon code est interrompu car: Impossible de lire la propriété 'insertRow' de null. Aucune suggestion?
Vrankela
1
@Vrankela: Votre sélecteur est probablement incorrect (première ligne dans l'exemple).
Christian Strempfer
2
ce qui précède échouerait la première fois. vérifiez plutôt s'il n'y a pas de lignes: var rows = tableRef.rows; var rowsSoFar = (lignes == null)? 0: lignes.longueur; var newRow = tableRef.insertRow (rowsSoFar);
inor le
Merci Jonathan, Comment ajouter un style css dans textnote?
Nguyễn Thắng
2
Au lieu de cela, tableRef.insertRow(tableRef.rows.length);vous pouvez simplement utiliser tableRef.insertRow(-1);pour insérer la ligne à la fin du tableau.
jeanggi90
32

Vous pouvez essayer l'extrait de code suivant à l'aide de jQuery :

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");
Sasidharan
la source
22
peut-être que vous avez raison, mais parfois vous avez besoin de connaître les vraies choses :) et comme je le dis, sachez toujours JavaScript avant d'utiliser n'importe quelle bibliothèque, pas de corps dur;)
Marwan
Ouais n'oublie pas les virgules dans 'tbody' !! $(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );
Heitor
J'essaie d'appliquer votre réponse à mon cas, mais je n'ai pas pu, alors j'ai posté une nouvelle question, pensez-vous que vous pouvez y répondre et me sauver? ► stackoverflow.com/q/63194846/3298930 .
Jose Manuel Abarca Rodríguez le
13

Approche de base:

Cela devrait ajouter du contenu au format HTML et afficher la ligne nouvellement ajoutée.

var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
Kurkula
la source
2
Ma solution préférée: très élégante et avec une flexibilité supplémentaire pour ajouter du HTML interne.
jimiayler
9

Tu es proche. Ajoutez simplement la ligne au tbodylieu de table:

myTbody.insertRow();

Obtenez simplement une référence à tBody( myTbody) avant utilisation. Notez que vous n'avez pas besoin de passer la dernière position dans une table; il est automatiquement positionné à la fin lors de l'omission d'argument.

Une démo en direct est sur jsFiddle .

Teemu
la source
6

Je pense que ce script est exactement ce dont vous avez besoin 

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
Marwan
la source
bien sûr, vous devez modifier votre nouvelle ligne mais je viens de proposer le concept dans la réponse et vous laisse le reste :)
Marwan
4

Ajouter des lignes:

<html>
    <script>
        function addRow() {
            var table = document.getElementById('myTable');
            //var row = document.getElementById("myTable");
            var x = table.insertRow(0);
            var e = table.rows.length-1;
            var l = table.rows[e].cells.length;
            //x.innerHTML = "&nbsp;";

            for (var c=0, m=l; c < m; c++) {
                table.rows[0].insertCell(c);
                table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function addColumn() {
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function deleteRow() {
            document.getElementById("myTable").deleteRow(0);
        }

        function deleteColumn() {
            // var row = document.getElementById("myRow");
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].deleteCell(0); // var table handle
            }
        }
    </script>

    <body>
        <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
        <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
        <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
        <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

        <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
            <tr id='myRow'>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>
Développer l'extrait

Et les cellules.

pota opt
la source
7
Je pense que vous devriez utiliser des variables plus sensibles lors de la création d'un exemple.
Uriahs Victor
2

J'ai essayé ceci, et cela fonctionne pour moi:

var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);
Pandiyan Cool
la source
2
Et si le pied de page comporte 2 lignes?
Jérôme Verstrynge
1
Ok, faites-le simplement comme var row = table.insertRow (0); il ajoutera une ligne en haut
Pandiyan Cool
@JVerstry tbody: c'est exactement ce que fait mozilla
e2-e4
1

Vous pouvez utiliser l'exemple suivant:

<table id="purches">
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaction Date</th>
            <th>Category</th>
            <th>Transaction Amount</th>
            <th>Offer</th>
        </tr>
    </thead>

    <!--  <tr th:each="person: ${list}"    >
            <td><li th:each="person: ${list}" th:text="|${person.description}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.price}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.available}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.from}|"></li></td>
            </tr>
    -->

    <tbody id="feedback">
    </tbody>
</table>

Fichier JavaScript:

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
        //  var json = "<h4>Ajax Response</h4><pre>"  + JSON.stringify(data, null, 4) + "</pre>";
        // $('#feedback').html(json);
        //
        console.log("SUCCESS: ", data);
        //$("#btn-search").prop("disabled", false);

        for (var i = 0; i < data.length; i++) {
            //$("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td></tr>');
            $('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td></tr>');

            alert(data[i].accountNumber)
        }
    },
    error: function (e) {
        var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
        $('#feedback').html(json);

        console.log("ERROR: ", e);
        $("#btn-search").prop("disabled", false);
    }
});
vaquar khan
la source
1

Ajouter une colonne, Ajouter une ligne, Supprimer une colonne et Supprimer une ligne.

La manière la plus simple

function addColumn(myTable) {
    var table = document.getElementById(myTable);
    var row = table.getElementsByTagName('tr');
    for (i=0; i<row.length; i++) {
        row[i].innerHTML = row[i].innerHTML + '<td></td>';
    }
}

function deleterow(tblId)
{
      var table = document.getElementById(tblId);
      var row = table.getElementsByTagName('tr');
      if (row.length != '1') {
          row[row.length - 1].outerHTML = '';
      }
}

function deleteColumn(tblId)
{
    var allRows = document.getElementById(tblId).rows;
    for (var i=0; i<allRows.length; i++) {
        if (allRows[i].cells.length > 1) {
            allRows[i].deleteCell(-1);
        }
    }
}

function myFunction(myTable) {
    var table = document.getElementById(myTable);
    var row = table.getElementsByTagName('tr');
    var row = row[row.length-1].outerHTML;
    table.innerHTML = table.innerHTML + row;
    var row = table.getElementsByTagName('tr');
    var row = row[row.length-1].getElementsByTagName('td');
    for(i=0; i<row.length; i++) {
        row[i].innerHTML = '';
    }
}
table, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    cursor: text;
    padding: 10px;
}
td:empty:after {
    content: "Type here...";
    color: #CCCCCC;
}
<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <form>
            <p>
            <input type="button" value="+Column" onclick="addColumn('tblSample')">
            <input type="button" value="-Column" onclick="deleteColumn('tblSample')">
            <input type="button" value="+Row" onclick="myFunction('tblSample')">
            <input type="button" value="-Row" onclick="deleterow('tblSample')">
            </p>
            <table><tbody id="tblSample" contenteditable><tr><td></td></tr></tbody></table>
        </form>
    </body>

</html>
Développer l'extrait

Siddhartha Mahato
la source