Comment puis-je obtenir l’en-tête de table correspondant (th) d’une cellule de tableau (td)?

Compte tenu du tableau suivant, comment pourrais-je obtenir l’en-tête de table correspondant à chaque élément td?

Name Address
Bob 1 High Street

Étant donné que je possède déjà l’un des éléments td disponibles, comment pourrais-je trouver l’élément correspondant?

 var $td = IveGotThisCovered(); var $th = GetTableHeader($td); 

 var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')'); 

Ou un peu simplifié

 var $th = $td.closest('table').find('th').eq($td.index()); 
 var $th = $("table thead tr th").eq($td.index()) 

Il serait préférable d’utiliser un identifiant pour référencer la table s’il en existe plusieurs.

Vous pouvez le faire en utilisant l’index du td:

 var tdIndex = $td.index() + 1; var $th = $('#table tr').find('th:nth-child(' + tdIndex + ')'); 

Solution qui gère le colspan

J’ai une solution basée sur la correspondance du bord gauche du td avec le bord gauche du th correspondant. Il devrait gérer des colspans arbitrairement complexes.

J’ai modifié le scénario de test pour montrer que le colspan arbitraire est géré correctement.

Démo en direct

JS

 $(function($) { "use ssortingct"; // 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 <= 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

 
Not header! Name Address Other
X 1 Bob J Public 1 High Street Postfix

La solution Pure JavaScript:

 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) + ')') 

Trouver la correspondance pour un td , en tenant compte des problèmes d’index colspan .

 $('table').on('click', 'td', get_TH_by_TD) function get_TH_by_TD(e){ var idx = $(this).index(), th, th_colSpan = 0; for( var i=0; i < this.offsetParent.tHead.rows[0].cells.length; i++ ){ th = this.offsetParent.tHead.rows[0].cells[i]; th_colSpan += th.colSpan; if( th_colSpan >= (idx + this.colSpan) ) break; } console.clear(); console.log( th ); return th; } 
 table{ width:100%; } th, td{ border:1px solid silver; padding:5px; } 
  

Click a TD:

Name Address Other
X 1 Jon Snow 12 High Street Postfix Public

C’est simple, si vous les référencez par index. Si vous souhaitez masquer la première colonne, vous devez:

Copier le code $ (‘# thetable tr’). Find (‘td: nth-child (1), th: nth-child (1)’). Toggle ();

La raison pour laquelle j’ai d’abord sélectionné toutes les lignes de la table et ensuite les deux td et th qui étaient le nième enfant est que nous n’aurions pas à sélectionner la table et toutes les lignes de la table deux fois. Cela améliore la vitesse d’exécution du script. Gardez à l’esprit, nth-child() est basé sur 1 , pas 0 .