How to get value from html table <tr>?

Issue

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>

Solution

First you can't use td tag like this it should in next tr tag

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>

Answered By - Rana