Как вставить строку в тело HTML-таблицы в JavaScript

У меня есть HTML-таблица с верхним и нижним колонтитулом:

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

Я пытаюсь добавить строку в tbody со следующим:

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

но строка добавляется в раздел tfoot.

Как мне вставить tbody?

ОТВЕТЫ

Ответ 1

Если вы хотите добавить строку в tbody, получите ссылку на нее и добавьте ее туда.

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

Рабочая демонстрация здесь. Также вы можете проверить документацию insertRow здесь.

Ответ 2

Вы можете попробовать следующий фрагмент, используя Jquery.

$(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );

Ответ 3

Основной подход:

Это должно добавить html-форматированный контент и показать новую добавленную строку.

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

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

Ответ 4

Вы близки, просто добавьте строку к tbody вместо table:

myTbody.insertRow();

Просто получите ссылку на tBody (myTbody) перед использованием. Обратите внимание, что вам не нужно пропускать последнюю позицию в таблице, она автоматически позиционируется в конце при пропуске аргумента.

Живая демоверсия на jsFiddle.

Ответ 5

Я думаю, что это script, что вам нужно

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)

Ответ 6

добавить строки

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

Ответ 7

Я пробовал это,

это работает для меня

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

Ответ 8

Вы можете использовать следующий пример

<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 файл:

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

    }
});

Ответ 9

Добавить столбец, Добавить строку, Удалить столбец, Удалить строку. Самый простой способ

    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>

Ответ 10

Я думаю, что это лучший способ добавить строку в таблицу:

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
}