CODEWITHSUNDEEP
javascripthtmlhtml-table
Datacrawler
Datacrawler

Reputation: 2876

getElementsByTagName for the 1st row columns in Javascript

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

Upvotes: 0

Views: 1322

Answers (1)

Yogen Darji
Yogen Darji

Reputation: 3300

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>

Upvotes: 1

Related Questions