blocks|key|951357|text|var+$th+=+$td.closest('tbody').prev('thead').find('>+tr+>+th:eq('+%2B+$td.index()+%2B+')');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|951358|或者稍微简化一点|unstyled|951359|var+$th+=+$td.closest('table').find('th').eq($td.index());|951360|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>var $th = $td.closest('tbody').prev('thead').find('&gt; tr &gt; th:eq(' + $td.index() + ')');
</code></pre>

<p>Or a little bit simplified</p>

<pre><code>var $th = $td.closest('table').find('th').eq($td.index());
</code></pre>


blocks|key|1165505|text|var+$th+=+$("table+thead+tr+th").eq($td.index())|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1165506|如果有多个表，最好使用id来引用该表。|unstyled|1165507|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var $th = $("table thead tr th").eq($td.index())
</code></pre>

<p>It would be best to use an id to reference the table if there is more than one.</p>


blocks|key|951400|text|您可以使用td的索引来完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|951401|var+tdIndex+=+$td.index()+%2B+1;
var+$th+=+$('#table+tr').find('th:nth-child('+%2B+tdIndex+%2B+')');|code-block|syntax|javascript|951402|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do it by using the td's index:</p>

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


blocks|key|1165573|text|处理colspan的解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1165574|我有一个基于将td的左边缘与相应th的左边缘相匹配的解决方案。它应该可以处理任意复杂的colspan。|1165575|我修改了测试用例，以显示可以正确处理任意colspan。|1165576|Live+Demo|1165577|JS|1165578|$(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;
++}
});|code-block|syntax|javascript|1165579|CSS|1165580|.highlight+{
++background-color:+#EEE;
}|1165581|HTML|1165582|<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>|1165583|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/hssvupe8/1/^0|2|7|0|7|2|G|2|0|K|7|0|0|9|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|L|3|M|5|6|7|1N|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1O|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1P|8|@]|D|@]|E|$]]|$1|U|3|V|5|P|7|1Q|8|@]|D|@]|E|$Q|R]]|$1|W|3|X|5|6|7|1R|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|P|7|1S|8|@]|D|@]|E|$Q|R]]|$1|10|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

<h2>Solution that handles <code>colspan</code></h2>

<p>I have a solution based on matching the left edge of the <code>td</code> to the left edge of the corresponding <code>th</code>. It should handle arbitrarily complex colspans.</p>

<p>I modified the test case to show that arbitrary <code>colspan</code> is handled correctly.</p>

<h3><a href="https://jsfiddle.net/hssvupe8/1/" rel="nofollow">Live Demo</a></h3>

<h3>JS</h3>

<pre><code>$(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;
  }
});
</code></pre>

<h3>CSS</h3>

<pre><code>.highlight {
  background-color: #EEE;
}
</code></pre>

<h3>HTML</h3>

<pre><code>&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;
</code></pre>


blocks|key|951453|text|纯JavaScript的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|951454|var+index+=+Array.prototype.indexOf.call(your_td.parentNode.children,+your_td)
var+corresponding_th+=+document.querySelector('#your_table_id+th:nth-child('+%2B+(index%2B1)+%2B+')')|code-block|syntax|javascript|951455|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Pure JavaScript's solution:</p>

<pre><code>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) + ')')
</code></pre>


blocks|key|1165618|text|查找td的匹配th，并考虑colspan索引问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1165619|​|1165620|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%2B%2B+){
++++++th_colSpan_acc+%2B=+thCells[i].colSpan
++++++if(+th_colSpan_acc+>=+(idx+%2B+tdNode.colSpan)+)+break
+++}
+
+++return+thCells[i]
}|code-block|syntax|javascript|1165621|table{+width:100%25;+}
th,+td{+border:1px+solid+silver;+padding:5px;+}|1165622|<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>|1165623|1165624|entityMap^0|2|2|7|2|D|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|S|$]]

<h3>Find matching <code>th</code> for a <code>td</code>, taking into account <code>colspan</code> index issues.</h3>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; thCells.length; i++ ){
      th_colSpan_acc += thCells[i].colSpan
      if( th_colSpan_acc &gt;= (idx + tdNode.colSpan) ) break
   }
 
   return thCells[i]
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>table{ width:100%; }
th, td{ border:1px solid silver; padding:5px; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Click a TD:&lt;/p&gt;
&lt;table&gt;
    &lt;thead&gt; 
        &lt;tr&gt;
            &lt;th colspan="2"&gt;&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th colspan="2"&gt;Address&lt;/th&gt;
            &lt;th colspan="2"&gt;Other&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt; 
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;X&lt;/td&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Jon Snow&lt;/td&gt;
            &lt;td&gt;12&lt;/td&gt;
            &lt;td&gt;High Street&lt;/td&gt;
            &lt;td&gt;Postfix&lt;/td&gt;
            &lt;td&gt;Public&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>Given the following table, how would I get the corresponding table header for each td element?</p>

<pre><code>&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;
</code></pre>

<p>Given that I currently have any of the <code>td</code> elements available to me already, how could I find the corresponding <code>th</code> element?</p>

<pre><code>var $td = IveGotThisCovered();
var $th = GetTableHeader($td);
</code></pre>


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

给定下表，我如何获取每个td元素对应的表头？<table>    <thead>         <tr>            <th id="name">Name</th>            <th id="address">Address</th>        </tr>    </thead>     <tbody>        <tr>            <td>Bob</t

问如何从表格单元(td)中获取对应的表格标题(th)？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从表格单元(td)中获取对应的表格标题(th)？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从表格单元(td)中获取对应的表格标题(th)？
EN