0

У меня есть Html страница и на ней размещена таблица.

var t = document.getElementById('table');
var tra = t.getElementsByTagName('tbody'); // Здесь выскакивает ошибка
var trs = tra.getElementsByTagName('tr');
var tds = null;
var sum;

for (var i = 0; i < trs.length; i++) {
  tds = trs[i].getElementsByTagName('td');
  for (var n = 0; n < trs.length; n++) {
    sum += "array[]=" + tds[n]
    if (i != trs.length - 1) {
      sum += "&"
    }
  }
}


console.log(sum);
<div tag="table_div">
  <table border="1" id="table">
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>...</tr>/и так далее
      <tbody>
  </table>
</div>

Он не работает. В чём проблема? Или как мне правильно пройтись по всем элементам таблицы?

Максим Никитин
  • 155
  • 13

2 Answers2

3

var t = document.getElementById('table');
var tra = t.children;
var trs = tra[0].children;
var tds = null;
var sum = 0;

for (var i=0; i<trs.length; i++)  {
    tds = trs[i].children;
    for (var n=0; n<tds.length;n++)  {
        sum += parseInt(tds[n].innerText);
    }
}
console.log(sum);
<div tag="table_div">
    <table border="1" id="table">
        <tbody>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>...</tr>/и так далее
        <tbody>
    </table>
</div>
IvaMuxa
  • 1,466
  • 5
  • 17
  • Большое спасибо за ответ! Но у меня возникла новая проблема. Дело в том что я создаю таблицу с помощью php скрипта. И Js наотрез отказывается видеть . Что с этим можно сделать? Пишет Uncaught TypeError: Cannot read property 'children' of undefined – Максим Никитин May 14 '20 at 20:33
  • переменная из которой вы пытаетесь получить список дочерних элементов не присвоилось значения, смотрите выше ошибку в той строке где этой переменной присваиваете значение используйте console.log() где нужно посмотреть результат функции – IvaMuxa May 15 '20 at 17:03
  • В том то и дело, что я первым делом посмотрел что мне выводит console.log саму которая динамически создается JS прекрасно находит а именно найти не может.
    – Максим Никитин May 15 '20 at 20:04
1

var sum = "";
document.querySelectorAll("#table tr").forEach(tr => {
  var cells = [];
  tr.querySelectorAll("td").forEach(td => cells.push(td.textContent));
  sum += "row=" + cells.join("&");
});

console.log(sum);
<div tag="table_div">
  <table border="1" id="table">
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>...</tr>/и так далее
      <tbody>
  </table>
</div>