How to get value from html table <tr>?

Question

I have a website that need to validate the table header name. For example, it wont allow user to click a button if the HTML consist a header name Group1 . So my question is how can I find the table header name Group1 in the <tr> using Javascript?

Full HTML:

<table class="table table-striped table-bordered" id="tableid">
   <tbody>
      <tr>
         <th>Device</th>
         <th>Serial</th>
         <th>ID</th>
         <th>Name</th>
         <th>Groups</th>
         <th>Device</th>
         <td>Group1</td>
         <td>Group2</td>
      </tr>
      <tr>
         <td>TY83-FPSX-C3WS</td>
         <td>xxx1</td>
         <td>test1</td>
         <td>John</td>
         <td> Driver</td>
         <td>DKFU-V7ZE-RD9R</td>
         <td>
            <div class="col" classname="col">
               <select name="group1" id="groupId">
                  <option>Null</option>
                  <option value="IT">IT</option>
                  <option value="Cleaning">Cleaning</option>
                  <option value="Accountant">Accountant</option>
               </select>
            </div>
         </td>
         <td>
            <div class="col" classname="col">
               <select name="group1" id="groupId">
                  <option>Null</option>
                  <option value="IT">IT</option>
                  <option value="Cleaning">Cleaning</option>
                  <option value="Accountant">Accountant</option>
               </select>
            </div>
         </td>
      </tr>
      <tr>
         <td>4SB9-NR2D-742E</td>
         <td>xxx2</td>
         <td>test2</td>
         <td>Cena</td>
         <td>Telesales</td>
         <td>DqwdKFU-VqwdZE-RD9R</td>
         <td>
            <div class="col" classname="col">
               <select name="group1" id="groupId">
                  <option>Null</option>
                  <option value="IT">IT</option>
                  <option value="Cleaning">Cleaning</option>
                  <option value="Accountant">Accountant</option>
               </select>
            </div>
         </td>
         <td>
            <div class="col" classname="col">
               <select name="group1" id="groupId">
                  <option>Null</option>
                  <option value="IT">IT</option>
                  <option value="Cleaning">Cleaning</option>
                  <option value="Accountant">Accountant</option>
               </select>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

If there is no specific reason for using td in Group1 and Group2 then this can be modified to:

Original HTML :

 <tr>
     <th>Device</th>
     <th>Serial</th>
     <th>ID</th>
     <th>Name</th>
     <th>Groups</th>
     <th>Device</th>
     <td>Group1</td>
     <td>Group2</td>
  </tr>

Modified HTML :

  <tr>
     <th>Device</th>
     <th>Serial</th>
     <th>ID</th>
     <th>Name</th>
     <th>Groups</th>
     <th>Device</th>
     <th>Group1</th>
     <th>Group2</th>
  </tr>

And the following code works:

$("#tableid").on('click', 'td', function(e) {
   //debug statement to check if it entered the function
   console.log("debug: in function working") 

  // to get the column index of the cell clicked
  var index = $(this).index();

  // debug statement to check the index
  console.log(index); 

  // get the table
  var table = $(this).closest('table'); 

  // get the header name.
  var header = table.find('tr th').eq(index).text();
 
 //debug statement to check header name
 console.log(header); 

 //check if the header is group 1 then pop alert not to click button
  if(header == "Group1")
    alert("you cannot click button");  
});

Another thing you could do if the td is important is that you can put all header elements in tr with a class="header_validate" for example and change the line:

var header = table.find('tr th').eq(index).text();

with

var header = table.find('tr .header_validate').eq(index).text();

Answer 2

Just check for table names

let th = document.getElementsByTagName("th");
let td = document.getElementsByTagName("td");
let ts = [...th, ...td];
let isGroup = false;
ts.map(a => a.textContent.includes("Group1") && (isGroup = true));
console.log(isGroup);

Answer 3

First if there is no specific reason to use td tag like this (in 1st tr tag) then it can be used in next tr tag . Below solution is applicable on present use of tag but with some changes .

You can loop through all th tag and match the innerHTML with required condition, if that matched get the i value (which is the tag having that value).

Using i value print the output

 function func() { var trTag = document.querySelector("tr"); var thTag = trTag.querySelectorAll("th"); for (let i = 0; i < thTag.length; i++) { if (thTag[i].innerHTML === "Group1") var current = i; } document.querySelector("#demo").innerHTML = thTag[current].innerHTML; thTag[current].style.backgroundColor = "red" }

 <table class="table table-striped table-bordered" id="tableid"> <tbody> <tr> <th>Device</th> <th>Serial</th> <th>ID</th> <th>Name</th> <th>Groups</th> <th>Device</th> <th>Group1</th> <th>Group2</th> </tr> <tr> <td>TY83-FPSX-C3WS</td> <td>xxx1</td> <td>test1</td> <td>John</td> <td> Driver</td> <td>DKFU-V7ZE-RD9R</td> <td> <div class="col" classname="col"> <select name="group1" id="groupId"> <option>Null</option> <option value="IT">IT</option> <option value="Cleaning">Cleaning</option> <option value="Accountant">Accountant</option> </select> </div> </td> <td> <div class="col" classname="col"> <select name="group1" id="groupId"> <option>Null</option> <option value="IT">IT</option> <option value="Cleaning">Cleaning</option> <option value="Accountant">Accountant</option> </select> </div> </td> </tr> <tr> <td>4SB9-NR2D-742E</td> <td>xxx2</td> <td>test2</td> <td>Cena</td> <td>Telesales</td> <td>DqwdKFU-VqwdZE-RD9R</td> <td> <div class="col" classname="col"> <select name="group1" id="groupId"> <option>Null</option> <option value="IT">IT</option> <option value="Cleaning">Cleaning</option> <option value="Accountant">Accountant</option> </select> </div> </td> <td> <div class="col" classname="col"> <select name="group1" id="groupId"> <option>Null</option> <option value="IT">IT</option> <option value="Cleaning">Cleaning</option> <option value="Accountant">Accountant</option> </select> </div> </td> </tr> </tbody> </table> <button onclick="func()">Click</button> <div id="demo"></div>