So fügen Sie eine Zeile in einen HTML-Tabellenkörper in JavaScript ein

132

Ich habe eine HTML-Tabelle mit einer Kopf- und Fußzeile:

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

Ich versuche, eine Zeile hinzuzufügen tbody mit folgendem :

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

Die Zeile wird jedoch im tfootAbschnitt hinzugefügt .

Wie füge ich ein tbody?

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

Antworten:

214

Wenn Sie dem eine Zeile hinzufügen möchten tbody, holen Sie sich einen Verweis darauf und fügen Sie ihn dort hinzu.

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

Eine funktionierende Demo ist hier . Sie können auch die Dokumentation insertRow hier überprüfen .

Jonathan Naguin
quelle
3
Mein Code bricht ab, weil: Die Eigenschaft 'insertRow' von null kann nicht gelesen werden. Irgendwelche Vorschläge?
Vrankela
1
@Vrankela: Wahrscheinlich ist Ihre Auswahl falsch (erste Zeile im Beispiel).
Christian Strempfer
2
das oben genannte würde das erste Mal scheitern. Überprüfen Sie stattdessen, ob keine Zeilen vorhanden sind: var rows = tableRef.rows; var rowsSoFar = (rows == null)? 0: rows.length; var newRow = tableRef.insertRow (rowsSoFar);
Inor
Danke Jonathan, wie füge ich einen CSS-Stil in die Textnote ein?
Nguyễn Thắng
2
Stattdessen tableRef.insertRow(tableRef.rows.length);können Sie einfach tableRef.insertRow(-1);die Zeile am Ende der Tabelle einfügen.
Jeanggi90
32

Sie können das folgende Snippet mit jQuery ausprobieren :

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");
Sasidharan
quelle
22
Vielleicht hast du recht, aber manchmal musst du das echte Zeug kennen :) und wie gesagt immer JavaScript kennen, bevor du eine Bibliothek benutzt, kein hartes Gefühl Körper;)
Marwan
Ja, vergiss die Kommas in 'tbody' nicht !! $(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );
Heitor
13

Grundlegender Ansatz:

Dies sollte HTML-formatierten Inhalt hinzufügen und die neu hinzugefügte Zeile anzeigen.

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

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
Kurkula
quelle
2
Meine Lieblingslösung: sehr elegant und mit zusätzlicher Flexibilität, um inneres HTML hinzuzufügen.
Jimiayler
9

Du bist nah dran. Fügen Sie einfach die Zeile zu tbodyanstelle von table:

myTbody.insertRow();

Holen Sie sich vor der Verwendung einfach einen Verweis auf tBody( myTbody). Beachten Sie, dass Sie die letzte Position in einer Tabelle nicht übergeben müssen. Es wird automatisch am Ende positioniert, wenn das Argument weggelassen wird.

Eine Live-Demo gibt es bei jsFiddle .

Teemu
quelle
6

Ich denke, dieses Skript ist genau das, was Sie brauchen 

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
Marwan
quelle
Natürlich müssen Sie Ihre neue Zeile ändern, aber ich habe das Konzept nur in der Antwort angeboten und den Rest Ihnen überlassen :)
Marwan
4

Zeilen hinzufügen:

<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>
Erweitern Sie das Snippet

Und Zellen.

pota opt
quelle
7
Ich denke, Sie sollten beim Erstellen eines Beispiels sinnvollere Variablen verwenden.
Uriahs Victor
2

Ich habe es versucht und das funktioniert bei mir:

var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);
Pandiyan Cool
quelle
2
Und was ist, wenn die Fußzeile 2 Zeilen hat?
Jérôme Verstrynge
1
Ok einfach mach es als var row = table.insertRow (0); es wird Reihe oben hinzufügen
Pandiyan Cool
@ JVerstry tbody: das ist genau das, was Mozilla
e2-e4
1

Sie können das folgende Beispiel verwenden:

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

JavaScript-Datei:

$.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
quelle
1

Spalte hinzufügen, Zeile hinzufügen, Spalte löschen und Zeile löschen.

Der einfachste Weg

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>
Erweitern Sie das Snippet

Siddhartha Mahato
quelle