getElementsByTagName for the 1st row columns in Javascript

Question

I have a table and I am editing the name of a specific table column value using the code below in JS:

document.querySelector('tr:nth-child(1) > td:nth-child(1)').innerHTML = "1111";  

Now, I am trying to make it more dynamic considering that the column is unknown (first or third etc).

The script below check for every td in the table and it works:

 var columns = document.getElementsByTagName('td'); for (var i=1; i<columns.length; i++) { if(document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML.includes("Column 1")) { document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML = "11111"; } if(document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML.includes("Column 2")) { document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML = "2222"; } console.log(i); } 

 <table border="1" class="richtext-query-table"><tbody><tr><td>Column 0</td><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr><tr><td>Column 5</td><td>£3K</td><td>5,748</td><td>£0.45</td><td>0.93 %</td></tr><tr><td></td><td>--</td><td>4,551</td><td>£0.00</td><td>0.66 %</td></tr></tbody></table> 

but I am getting an error because of the fact that the script applies for every td in the table. Now, I am trying to make it work only for the td s of the first row.

 var columns = document.getElementsByTagName('tr:first-child > td'); for (var i=1; i<columns.length; i++) { if(document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML.includes("Column 1")) { document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML = "1111"; } if(document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML.includes("Column 2")) { document.querySelector('tr:nth-child(1) > td:nth-child('+i+')').innerHTML = "2222"; } console.log(i); } 

 <table border="1" class="richtext-query-table"><tbody><tr><td>Column 0</td><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr><tr><td>Column 5</td><td>£3K</td><td>5,748</td><td>£0.45</td><td>0.93 %</td></tr><tr><td></td><td>--</td><td>4,551</td><td>£0.00</td><td>0.66 %</td></tr></tbody></table> 

and it does not work unless I try using the eq function from this answer: LINK

although I am having limitations with the functions in the platform I am using. I can use another line to get the first row and then get the columns from the first row (for statement) but I am guessing there is an easier way by just changing the part:

var columns = document.getElementsByTagName('tr:first-child td');

It looks simple but I cannot find a solution.

Answer 1

document.getElementsByTagName('tr')[0] it will return first tr , then row.querySelectorAll('td') get all columns of first row.

 var row = document.getElementsByTagName('tr')[0]; var columns = row.querySelectorAll('td'); for (var i = 1; i < columns.length; i++) { if (row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML.includes("Column 1")) { row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML = "1111"; } if (row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML.includes("Column 2")) { row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML = "2222"; } console.log(i); } 

 <table border="1" class="richtext-query-table"> <tbody> <tr> <td>Column 0</td> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> </tr> <tr> <td>Column 5</td> <td>£3K</td> <td>5,748</td> <td>£0.45</td> <td>0.93 %</td> </tr> <tr> <td></td> <td>--</td> <td>4,551</td> <td>£0.00</td> <td>0.66 %</td> </tr> </tbody> </table>