Добавить ряд html таблицы JavaScript

452

05 февраля 2017, 13:59

Здравствуйте. Проблема... Есть HTML таблица:

<table id="generator_t">
    <tr>
        <th colspan="3">GENERATOR</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>пос</td>
        <td>пос</td>
        <td>пос</td>
    </tr>
</table>

Нужно через JavaScript, добавить tr с тремя ячейками перед последним tr Как это возможно реализовать? Спасибо.

Answer 1

В принципе, в коде комментарии есть.
Но вот на codepen форматирование более понятное.

// Создаем переменные, на которые ссылаемся 
var tbodyOfTable = document.querySelector('#generator_t tbody'); 
var listOfTr = tbodyOfTable.children; 
// Генерируем новый элемент 
var newTr = document.createElement('tr'); 
newTr.innerHTML = '<td>2</td><td>2</td><td>2</td>'; 
// Вставляем элемент по кнопке `input` 
document.querySelector('input').onclick = function() { 
  tbodyOfTable.insertBefore(newTr, listOfTr[(listOfTr.length - 1)]); 
}

<table id="generator_t"> 
  <tr> 
    <th colspan="3">GENERATOR</th> 
  </tr> 
  <tr> 
    <td>1</td> 
    <td>1</td> 
    <td>1</td> 
  </tr> 
  <tr> 
    <td>пос</td> 
    <td>пос</td> 
    <td>пос</td> 
  </tr> 
</table> 
 
 
<input type='button'>

Answer 2

Добавляется не в то место, потому что в таблице, на самом деле, внутри все обернуто ещё в элемент tbody:

<table>
  <tbody>
    ...
  </tbody>
</table>

Посмотри в отладчике. Добавлять можно примерно так:

var table = document.getElementById('generator_t'); 
var tbody = table.children[0] 
 
var tr = document.createElement('tr'); 
var tdValues = [ 
  'Значения', 'трех', 'ячеек' 
]; 
 
tr.innerHTML = '<td>' + tdValues[0] + '</td> <td>' + tdValues[1] + '</td> <td>' + tdValues[2] + '</td>'; 
 
tbody.appendChild(tr)

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
</head> 
<body> 
  <table id="generator_t"> 
      <tr> 
          <th colspan="3">GENERATOR</th> 
      </tr> 
      <tr> 
          <td>1</td> 
          <td>1</td> 
          <td>1</td> 
      </tr> 
      <tr> 
          <td>пос</td> 
          <td>пос</td> 
          <td>пос</td> 
      </tr> 
  </table> 
</body> 
</html>