我怎样才能得到表格单元格（td）相应的表头（th）？
鉴于下表，我将如何得到每个TD元素相应的表头？
<table> <thead> <tr> <th id="name">Name</th> <th id="address">Address</th> </tr> </thead> <tbody> <tr> <td>Bob</td> <td>1 High Street</td> </tr> </tbody> </table> 鉴于目前我已经有了任何td元素，我怎么能find相应的元素呢？
var $td = IveGotThisCovered(); var $th = GetTableHeader($td);
var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')');
或者一点点简化
var $th = $td.closest('table').find('th').eq($td.index());
var $th = $("table thead tr th").eq($td.index())
如果有多个表，最好使用一个id来引用表。
你可以使用td的索引来做到这一点：
var tdIndex = $td.index() + 1; var $th = $('#table tr').find('th:nth-child(' + tdIndex + ')');
纯JavaScript的解决scheme：
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) + ')')
处理colspan解决scheme
我有一个解决scheme，将td的左边缘与相应的th的左边缘相匹配。 它应该处理任意复杂的集体。
我修改了testing用例来显示任意的colspan被正确处理。
现场演示
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与td匹配的th ，考虑到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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>
