javascript window - Wie fügt man Zeile in HTML-Tabellenkörper in Javascript ein?




5 Answers

Wenn Sie eine Zeile in den tbody , erhalten Sie 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(tableRef.rows.length);

// 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 here . Außerdem können Sie hier die Dokumentation von insertRow .

title kopfbereich

Ich habe eine HTML-Tabelle mit einer Kopfzeile und einer 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 in tbody mit dem folgenden hinzuzufügen:

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

Die Zeile wird jedoch im Abschnitt tfoot hinzugefügt.

Wie man es tbody ?




Sie sind in der Nähe, fügen Sie einfach die Zeile zum tbody anstelle der table :

myTbody.insertRow();

tBody myTbody vor dem Gebrauch einen Hinweis auf tBody ( myTbody ). Beachten Sie, dass Sie die letzte Position in einer Tabelle nicht übergeben müssen, sie wird automatisch am Ende positioniert, wenn Sie das Argument weglassen.

Eine Live-Demo bei jsFiddle .




Ich habe das versucht,

Das funktioniert für mich

var table=document.getElementById("myTable");
var row=table.insertRow(myTable.rows.length-2);
var cell1=row.insertCell(0);



Grundsätzlicher Ansatz:

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

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

var newRow   = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;



Sie können folgendes 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>

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

    }
});



Related

javascript html html-table insert row