Выполните цикл по 1-й строке таблицы HTML (GridView) и получите содержимое ячейки с помощью Javascript

Question

У меня есть GridView, который читает из файла и когда я проверяю элемент его HTML-таблица выглядит примерно так:

<div>
<table>
  <tbody>
     <tr>
       <th id= "header1">...</th>
       <th id= "header2">...</th>
       <th id= "header3">...</th>
       <th id= "header4">...</th>
       <th id= "header5">...</th>
      <tr>..</tr>
      <tr>..</tr>
      <tr>..</tr>
      <tr>..</tr>
   </table>
</div>

Мне нужно перебрать первую строку, чтобы иметь возможность получить значения заголовка с помощью JavaScript. Я не могу перебрать только первую строку для извлечения значений.

Я понимаю, что сначала мне нужно подсчитать количество столбцов, чтобы создать цикл for, но я могу только подсчитать свои строки.

var table = document.getElementById("table1");
var rowCount = table.rows.length;
for (var r = 0, n = table.rows.length; r < n; r++) {

Нет ничего лучше table.columns.length. Как мне это сделать? Любая помощь будет принята с благодарностью.

Answer 1

так вы получите header значений в массиве

const el = [...document.querySelectorAll("th")];

const res = el.map(el => el.innerHTML)

console.log(res)

<div>
  <table>
    <tbody>
      <tr>
        <th id="header1">TEXT1</th>
        <th id="header2">TEX2</th>
        <th id="header3">TEXT3</th>
        <th id="header4">TEXT4</th>
        <th id="header5">TEXT5</th>
      </tr>
      <tr>..</tr>
      <tr>..</tr>
      <tr>..</tr>
      <tr>..</tr>
  </table>
</div>