How to get value from html table <tr>?-CodePudding

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>

CodePudding user response：

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();

CodePudding user response：

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

CodePudding user response：

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>