0

Здравствуйте. Проблема... Есть 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 Как это возможно реализовать? Спасибо.

4
  • Используете jQuery? или нужен чистый js?
    – cyadvert
    4 фев 2017 в 16:30
  • нужен чистый JS
    – php_array
    4 фев 2017 в 16:32
  • А почему сам не можешь сделать? Ты вообще пытался хоть что-то найти или сделать?
    – Yuri
    4 фев 2017 в 16:46
  • Да, я нашел как в конец добавить, но не в нужное место...
    – php_array
    4 фев 2017 в 16:48

2 ответа 2

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

1
  • Спасибо, огромное)))
    – php_array
    4 фев 2017 в 20:27
0

Добавляется не в то место, потому что в таблице, на самом деле, внутри все обернуто ещё в элемент 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>

1
  • Нужно вставлять перед последним tr. 4 фев 2017 в 17:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.