Bir tablo hücresinden (td) karşılık gelen tablo başlığını (th) nasıl alabilirim?

Aşağıdaki tablo göz önüne alındığında, her bir td öğesi için karşılık gelen tablo başlığını nasıl elde edebilirim?

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

Halihazırda kullanabileceğim herhangi bir tdöğeye sahip olduğum göz önüne alındığında , ilgili thöğeyi nasıl bulabilirim ?

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

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

Ya da biraz basitleştirilmiş

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

var $th = $("table thead tr th").eq($td.index())

Birden fazla varsa, tabloya başvurmak için bir id kullanmak en iyisidir.

Bunu td'nin indeksini kullanarak yapabilirsiniz:

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

İşleyen çözüm colspan

tdSol kenarını karşılık gelen sol kenarla eşleştirmeye dayalı bir çözümüm var th. Rasgele karmaşık colspans işlemesi gerekir.

Test senaryosunu keyfi colspanolarak doğru şekilde ele alındığını gösterecek şekilde değiştirdim.

Canlı 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>

Saf JavaScript'in çözümü:

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

Dizin sorunlarını hesaba katarak thbir için eşleşmeyi bulun .tdcolspan

$('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>

Onlara indeksle atıfta bulunursanız bu basit. İlk sütunu gizlemek istiyorsanız, şunları yaparsınız:

Kodu kopyala

$('#thetable tr').find('td:nth-child(1),th:nth-child(1)').toggle();

İlk olarak tüm tablo satırlarını seçmemin ve ardından n'inci çocuk olan td ve th'leri seçmemin nedeni, tabloyu ve tüm tablo satırlarını iki kez seçmemiz gerekmemesi. Bu, komut dosyası yürütme hızını artırır. Unutmayın nth-child(), 1temellidir, değil 0.