Jak wstawić wiersz do treści tabeli HTML w JavaScript

141

Mam tabelę HTML z nagłówkiem i stopką:

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

Próbuję dodać wiersz tbodyz następującymi elementami:

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

ale wiersz jest dodawany do tfootsekcji.

Jak wstawić tbody?

javascript html html-table insert row Jérôme Verstrynge
źródło
Samouczek w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow
Pandiyan Cool

Odpowiedzi:

229

Jeśli chcesz dodać wiersz do elementu tbody, pobierz do niego odwołanie i wywołaj jego insertRowmetodę.

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

// Insert a row at the end of table
var newRow = tbodyRef.insertRow();

// Insert a cell at the end of the row
var newCell = newRow.insertCell();

// Append a text node to the cell
var newText = document.createTextNode('new row');
newCell.appendChild(newText);
<table id="myTable">
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>initial row</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>My Footer</td>
    </tr>
  </tfoot>
</table>
Rozwiń fragment

(stare demo na JSFiddle)

Jonathan Naguin
źródło
3
Mój kod nie działa, ponieważ: Nie można odczytać właściwości „insertRow” o wartości null. Jakieś sugestie?
Vrankela
1
@Vrankela: Prawdopodobnie twój selektor jest nieprawidłowy (pierwsza linia w przykładzie).
Christian Strempfer
2
powyższe nie powiedzie się za pierwszym razem. zamiast tego sprawdź, czy nie ma żadnych wierszy: var rows = tableRef.rows; var rowsSoFar = (rows == null)? 0: row.length; var newRow = tableRef.insertRow (rowsSoFar);
inor
Dzięki Jonathan, jak dodać styl css do notatki tekstowej?
Nguyễn Thắng
3
Zamiast tego tableRef.insertRow(tableRef.rows.length);możesz w prosty tableRef.insertRow(-1);sposób wstawić wiersz na końcu tabeli.
jeanggi90
33

Możesz wypróbować następujący fragment kodu za pomocą jQuery :

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");
Sasidharan
źródło
22
może masz rację, ale czasami musisz znać się na rzeczy :) i jak mówię, zawsze poznaj JavaScript przed użyciem jakiejkolwiek biblioteki bez ciężkiego uczucia;)
Marwan
Próbuję zastosować twoją odpowiedź w mojej sprawie, ale nie mogłem, więc opublikowałem nowe pytanie, czy myślisz, że możesz na nie odpowiedzieć i mnie uratować? ► stackoverflow.com/q/63194846/3298930 .
Jose Manuel Abarca Rodríguez
15

Podstawowe podejście:

Powinno to dodać treść w formacie HTML i pokazać nowo dodany wiersz.

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

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
Kurkula
źródło
2
Moje ulubione rozwiązanie: bardzo eleganckie i z dodatkową elastycznością dodawania wewnętrznego kodu HTML.
jimiayler,
9

Jesteś blisko. Po prostu dodaj wiersz do tbodyzamiast table:

myTbody.insertRow();

Po prostu pobierz odwołanie do tBody( myTbody) przed użyciem. Zauważ, że nie musisz przekazywać ostatniej pozycji w tabeli; jest automatycznie umieszczany na końcu, gdy pomija argument.

Demo na żywo jest na jsFiddle .

Teemu
źródło
7

Myślę, że ten skrypt jest dokładnie tym, czego potrzebujesz 

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
Marwan
źródło
oczywiście musisz zmodyfikować swój nowy wiersz, ale właśnie zaproponowałem koncepcję w odpowiedzi, a resztę zostawiłem tobie :)
Marwan
4

Dodaj wiersze:

<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>
Rozwiń fragment

I komórki.

pota opt
źródło
7
Myślę, że podczas tworzenia przykładu należy użyć bardziej sensownych zmiennych.
Uriahs Victor
2

Próbowałem tego i to działa dla mnie:

var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);
Pandiyan Cool
źródło
2
A co jeśli stopka ma 2 rzędy?
Jérôme Verstrynge
1
Ok, proste zrób to jako var row = table.insertRow (0); doda rząd na górze
Pandiyan Cool
@JVerstry tbody: to jest dokładnie to, co robi Mozilla
e2-e4
1

Możesz posłużyć się następującym przykładem:

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

Plik 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
źródło
1

Dodaj kolumnę, Dodaj wiersz, Usuń kolumnę, Usuń wiersz. Najprostszy sposób

    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 id="tblSample" contenteditable><tr><td></td></tr></table>
    </form>

    </body>
    </html>
Rozwiń fragment

Siddhartha Mahato
źródło