How can I get the corresponding table header th from a table cell td

Question

Given the following table  how would I get the corresponding table header for each td element    lt table gt       lt thead gt            lt tr gt               lt th id  name  gt Name lt  th gt               lt th id  address  gt Address lt  th gt           lt  tr gt       lt  thead gt        lt tbody gt           lt tr gt               lt td gt Bob lt  td gt               lt td gt 1 High Street lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    Given that I currently have any of the td elements available to me already  how could I find the corresponding th element   var  td   IveGotThisCovered    var  th   GetTableHeader  td

User · Accepted Answer

var  th    td closest  tbody   prev  thead   find   gt  tr  gt  th eq      td index             Or a little bit simplified  var  th    td closest  table   find  th   eq  td index

User · Answer

You can do it by using the td s index   var tdIndex    td index     1  var  th       table tr   find  th nth-child     tdIndex

User · Answer

Find matching th for a td  taking into account colspan index issues    x000D   x000D     table   on  click    td   get TH by TD  x000D   x000D  function get TH by TD e   x000D     var idx     this  index    x000D         th  th colSpan   0  x000D   x000D     for  var i 0  i  lt  this offsetParent tHead rows 0  cells length  i      x000D        th   this offsetParent tHead rows 0  cells i   x000D        th colSpan    th colSpan  x000D        if  th colSpan  gt    idx   this colSpan    x000D          break  x000D       x000D      x000D     console clear    x000D     console log  th    x000D     return th  x000D    x000D  table  width 100     x000D  th  td  border 1px solid silver  padding 5px    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt Click a TD  lt  p gt  x000D   lt table gt  x000D       lt thead gt   x000D           lt tr gt  x000D               lt th colspan  2  gt  lt  th gt  x000D               lt th gt Name lt  th gt  x000D               lt th colspan  2  gt Address lt  th gt  x000D               lt th colspan  2  gt Other lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt   x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td gt X lt  td gt  x000D               lt td gt 1 lt  td gt  x000D               lt td gt Jon Snow lt  td gt  x000D               lt td gt 12 lt  td gt  x000D               lt td gt High Street lt  td gt  x000D               lt td gt Postfix lt  td gt  x000D               lt td gt Public lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

That s simple  if you reference them by index  If you want to hide the first column  you would   Copy code      thetable tr   find  td nth-child 1  th nth-child 1    toggle      The reason I first selected all table rows and then both td s and th s that were the n th child is so that we wouldn t have to select the table and all table rows twice  This improves script execution speed  Keep in mind  nth-child   is 1 based  not 0

User · Answer

var  th      table thead tr th   eq  td index      It would be best to use an id to reference the table if there is more than one

User · Answer

Pure JavaScript s solution   var index   Array prototype indexOf call your td parentNode children  your td  var corresponding th   document querySelector   your table id th nth-child      index 1

User · Answer

Solution that handles colspan  I have a solution based on matching the left edge of the td to the left edge of the corresponding th  It should handle arbitrarily complex colspans   I modified the test case to show that arbitrary colspan is handled correctly   Live Demo  JS    function         use strict         Only part of the demo  the thFromTd call does the work     document  on  mouseover mouseout    td   function event        var td     event target  closest  td            th   thFromTd td       th parent   find   highlight   removeClass  highlight        if  event type      mouseover         th addClass  highlight                Returns jquery object   function thFromTd td        var ofs   td offset   left          table   td closest  table            thead   table children  thead   eq 0           positions   cacheThPositions thead           matches   positions filter function eldata              return eldata left  lt   ofs                      match   matches matches length-1           matchEl     match el       return matchEl            Caches the positions of the headers       so we don t do a lot of expensive   offset    calls    function cacheThPositions thead        var data   thead data  cached-pos            allth      if  data        return data      allth   thead children  tr   children  th        data   allth map function           var th     this         return           el  this          left  th offset   left                 toArray        thead data  cached-pos   data       return data            CSS   highlight     background-color   EEE      HTML   lt table gt       lt thead gt            lt tr gt               lt th colspan  3  gt Not header  lt  th gt               lt th id  name  colspan  3  gt Name lt  th gt               lt th id  address  gt Address lt  th gt               lt th id  address  gt Other lt  th gt           lt  tr gt       lt  thead gt        lt tbody gt           lt tr gt               lt td colspan  2  gt X lt  td gt               lt td gt 1 lt  td gt               lt td gt Bob lt  td gt               lt td gt J lt  td gt               lt td gt Public lt  td gt               lt td gt 1 High Street lt  td gt               lt td colspan  2  gt Postfix lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

[jquery] How can I get the corresponding table header (th) from a table cell (td)?

Examples related to jquery

Examples related to jquery-selectors