Is there a way of obtaining the value of the TH when hoovering over a TD in a table on HTML?

Question

I am trying to obtain the value of a TH after hoovering over its TD. I am able to obtain the value of the TD data cell when I hoover over it but cannot find a way to get the value for the TH.

This javascript allows me to click on the TD to obtain the entire row of values or hoover over a particular cell to get the value of it. However, I can't seem to find a way to get the TH.

$('#grid').click(function(evt) {
  var row = $(evt.target).parent('tr'); // Get the parent row
  var cell = $(evt.target); //Get the cell
  alert('Row data: ' + row.text());
  alert('Cell data: ' + cell.text());
});

$('#grid').on('mouseenter', 'td', function() {
  console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="grid">
  <table id="table1" border="1">
    <thead>
      <th>ID</th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr>
        <td>101</td>
        <td>Jackie</td>
      </tr>
      <tr>
        <td>102</td>
        <td>Thomas</td>
      </tr>
    </tbody>
  </table>

https://stackoverflow.com/search?q=get+th+from+td – freedomn-m Jan 23 '19 at 08:37 — freedomn-m, Jan 23 '19 at 08:37

gavgrif · Answer 1 · 2019-01-23T09:21:05.657

Rather than using javascript or jquery to traverse the DOM to find the th involved- you could use a HTML5 data-attribute and set the vvalue for each td - then show that on the click (here i am consoling it for the snippet).

$('#table td').on('click', function() {
    let col = $(this).attr('data-col');
    let content = $(this).text();
    console.log(col + ": " + content);
});

table {
border-collapse: collapse;
}
th {
  border: solid 1px #d4d4d4;
  border-bottom-width: 2px;
  padding: 5px 10px
}


td {
  border: solid 1px #d4d4d4;
  padding: 5px 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <th>ID</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr>
      <td data-col="ID">101</td>
      <td data-col="Name">Jackie</td>
    </tr>
    <tr>
      <td data-col="ID">102</td>
      <td data-col="Name">Thomas</td>
    </tr>
  </tbody>
</table>

Alternatively - you could have an array of the th contents (espescially if you create the table dynamically) - then on the click of the td - get its index in its tr (again you could store this in a data-attribute - or as an id - then use that index to reference the array.

This ouwl be the better method use an array or object to create the table dynamically and then you already have the data source to reference the content from.

   var columns = ['ID','Name'];
   
   $('#table td').on('click', function() {
        let index = parseInt($(this).attr('data-index'));
        let col = columns[index];
        let content = $(this).text();
        console.log(col + ": " + content);
    });

    table {
    border-collapse: collapse;
    }
    th {
      border: solid 1px #d4d4d4;
      border-bottom-width: 2px;
      padding: 5px 10px
    }


    td {
      border: solid 1px #d4d4d4;
      padding: 5px 10px
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="table">
      <thead>
        <th>ID</th>
        <th>Name</th>
      </thead>
      <tbody>
        <tr>
          <td data-index='0'>101</td>
          <td data-index='1'>Jackie</td>
        </tr>
        <tr>
          <td data-index='0'>102</td>
          <td data-index='1'>Thomas</td>
        </tr>
      </tbody>
    </table>

score 0 · Answer 2 · answered Jan 23 '19 at 08:51

Based on thread linked in the comments, Ive created below code. This console logs the text value of the TH and the value of the TD on mouseover.

$('#grid').click(function(evt) {
    var row = $(evt.target).parent('tr'); // Get the parent row
    var cell = $(evt.target); //Get the cell
    alert('Row data: ' + row.text());
    alert('Cell data: ' + cell.text());
});

$('#grid').on('mouseenter', 'td', function() {
    var $td = $(this),
    $th = $td.closest('table').find('th').eq($td.index());
    console.log($th.text() + ": " + $td.text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
  <table id="table1" border="1">
    <thead>
      <th>ID</th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr>
        <td>101</td>
        <td>Jackie</td>
      </tr>
      <tr>
        <td>102</td>
        <td>Thomas</td>
      </tr>
    </tbody>
  </table>
</div>

score 0 · Answer 3 · answered Jan 23 '19 at 09:35

Find child-index-number of the td element under the tr element.

Find the th element by index.

//Find table
var table = document.getElementById('table');
//Hover event callback
function hoverTDEvent(evt) {
    //Only run on td
    if (evt.target.nodeName.toLowerCase() != 'td') {
        return false;
    }
    //Find relative index
    var index = Array.prototype.slice.call(evt.target.parentNode.children).indexOf(evt.target);
    //Find th by index and log contents
    console.log(table.querySelectorAll("th")[index].textContent,evt.target.textContent);
}
//Bind event
table.addEventListener("mousemove", hoverTDEvent);

<table id="table" border="1">
  <thead>
    <th>ID</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Jackie</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Thomas</td>
    </tr>
  </tbody>
</table>

Notice that this wont work if you use the colspan property.

Is there a way of obtaining the value of the TH when hoovering over a TD in a table on HTML?

3 Answers3