Как пройтись по html таблице с помощью JavaScript?

Question

У меня есть 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>

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

Answer 1

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>

Answer 2

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>

БЛОГ НА HUSL

Как пройтись по html таблице с помощью JavaScript?

Ответы (2 шт):