Форум

SolomonRei · #1 (**permalink**) 26.12.2018, 18:58

Добрый вечер.Есть скрипт,который добавляет товары на экран,добавляет он их в таблицу,и в строчку,нужно,чтобы когда уже было выведено 8 товаров на экран,9 товар начинался с новой строки,то есть нужен тег <tr>
Мой скрипт.

function addRow(id, value){
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
	    var td1 = document.createElement("TD")
	    td1.classList.add('border', 'price_class');
	    td1.appendChild(document.createTextNode(value))
	    tbody.appendChild(td1);
  }

addRow('priceTable', this.textContent);

laimas · #2 (**permalink**) 26.12.2018, 19:25

А где здесь TR? И как ячейку можно вставить в TBODY (tbody.appendChild(td1))?

SolomonRei · #3 (**permalink**) 26.12.2018, 19:43

Как-то вставилась)

SolomonRei · #4 (**permalink**) 26.12.2018, 19:44

Сам не знаю,как

laimas · #5 (**permalink**) 26.12.2018, 20:02

Сообщение от SolomonRei

Как-то вставилась)

Ячейка (TD) может быть только в строке (TR), которая уже может быть в теле таблицы (TBODY). Вставка же ячейки вне тега строки приведет к неожиданным результатам - таблица будет разбита. Если идет речь о вставке по условию, то где там добавляются товары не понятно, но если непосредственно в таблицу, то нужно добавить сначала в нее строку (TR), если последняя строка таблицы не имеет свободных ячеек, и уже в новую строку вставлять ячейку. Если же последняя строка таблицы имеет свободные ячейки (или имеет не все 8), то вводим текст в свободную ячейку или вставляем новую ячейку.

рони · #6 (**permalink**) 26.12.2018, 20:07

SolomonRei,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
      width: 50px;
      border: 1px solid #000000;
      text-align: center;
  }
  table{
      border-collapse: collapse;
  }

  </style>


</head>

<body>
<table id="priceTable"><tbody></tbody></table>
<script>
function addRow(id, value){
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    var tr = tbody.querySelector("tr:last-child");
    if(!tr || tr.cells.length == 8) tr = tbody.insertRow(-1);
    var td1 = document.createElement("TD")
        td1.classList.add('border', 'price_class');
        td1.appendChild(document.createTextNode(value))
        tr.appendChild(td1);
  }
for (var i = 1; i < 12; i++) {
addRow('priceTable', i);

}


  </script>
</body>
</html>

laimas · #7 (**permalink**) 27.12.2018, 04:34

SolomonRei, и td1.classList.add('border', 'price_class') лишнее, ведь если заполняется одна таблица, то сразу прописать стили для ее ячеек в CSS, и даже если таблица имеет несколько TBODY, а ячейки товаров добавляются в первое, то для ячеек первой TBODY таблицы с классом "name".

Форум

Справочник

Discord чат

Курсы javascript