循环浏览HTML表的第一行（GridView），并使用Javascript获取单元格内容

Question

I have a GridView which reads from a file and when I inspect element its HTML table looks something like this :

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

I need to loop through the first row to be able to get the header values using javascript. I can't seem to loop through just the first row to extract values.

I understand that I should count the number of columns first to create my "for" loop but I am only able to count my rows.

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

There's nothing like table.columns.length.How do I do that? Any help would be greatly appreciated.

Answer 1

like that you will get header values in an array

 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>