如何从表单元格(td)获得相应的表头(th) ？

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

Or a little bit simplified

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

You can do it by using the td's index:

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

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.

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

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 <= 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

<table>
<thead>
<tr>
<th colspan="3">Not header!</th>
<th id="name" colspan="3">Name</th>
<th id="address">Address</th>
<th id="address">Other</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">X</td>
<td>1</td>
<td>Bob</td>
<td>J</td>
<td>Public</td>
<td>1 High Street</td>
<td colspan="2">Postfix</td>
</tr>
</tbody>
</table>

Find matching th for a td, taking into account colspan index issues.

document.querySelector('table').addEventListener('click', onCellClick)


function onCellClick( e ){
if( e.target.nodeName == 'TD' )
console.log( get_TH_by_TD(e.target) )
}


function get_TH_by_TD( tdNode ){
var idx = [...tdNode.parentNode.children].indexOf(tdNode), // get td index
thCells = tdNode.closest('table').tHead.rows[0].cells, // get all th cells
th_colSpan_acc = 0 // accumulator


// iterate all th cells and add-up their colSpan value
for( var i=0; i < thCells.length; i++ ){
th_colSpan_acc += thCells[i].colSpan
if( th_colSpan_acc >= (idx + tdNode.colSpan) ) break
}
 

return thCells[i]
}

table{ width:100%; }
th, td{ border:1px solid silver; padding:5px; }

<p>Click a TD:</p>
<table>
<thead>
<tr>
<th colspan="2"></th>
<th>Name</th>
<th colspan="2">Address</th>
<th colspan="2">Other</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>1</td>
<td>Jon Snow</td>
<td>12</td>
<td>High Street</td>
<td>Postfix</td>
<td>Public</td>
</tr>
</tbody>
</table>