ฉันจะรับส่วนหัวตารางที่เกี่ยวข้อง (th) จากเซลล์ตาราง (td) ได้อย่างไร

จากตารางต่อไปนี้ฉันจะรับส่วนหัวตารางที่สอดคล้องกันสำหรับแต่ละองค์ประกอบ 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องค์ประกอบใด ๆ ที่พร้อมใช้งานแล้วฉันจะค้นหาthองค์ประกอบที่เกี่ยวข้องได้อย่างไร

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

โซลูชันที่จัดการ colspan

ผมมีวิธีการแก้ปัญหาขึ้นอยู่กับการจับคู่ขอบด้านซ้ายของไปที่ขอบด้านซ้ายของที่สอดคล้องกันtd thควรจัดการ colspans ที่ซับซ้อนโดยพลการ

ฉันแก้ไขกรณีทดสอบเพื่อแสดงว่า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>

โซลูชันของ 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) + ')')

ค้นหาการจับคู่thสำหรับ a tdโดยคำนึงถึง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>

ง่ายมากถ้าคุณอ้างอิงตามดัชนี หากคุณต้องการซ่อนคอลัมน์แรกคุณจะต้อง:

คัดลอกรหัส

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

เหตุผลแรกที่ฉันเลือกแถวตารางทั้งหมดจากนั้นทั้ง td และ th ที่เป็นลูกที่ n ก็เพื่อที่เราจะไม่ต้องเลือกตารางและแถวตารางทั้งหมดสองครั้ง ซึ่งจะช่วยเพิ่มความเร็วในการเรียกใช้สคริปต์ เก็บไว้ในใจnth-child()จะใช้ไม่ได้10