Làm cách nào để lấy tiêu đề bảng tương ứng (th) từ một ô trong bảng (td)?

Cho bảng sau, làm cách nào để lấy tiêu đề bảng tương ứng cho mỗi phần tử 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>

Cho rằng tôi hiện đã có sẵn bất kỳ tdphần tử nào, làm cách nào để tôi có thể tìm được thphần tử tương ứng ?

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

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

Hoặc đơn giản hóa một chút

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

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

Tốt nhất là sử dụng một id để tham chiếu bảng nếu có nhiều hơn một.

Giải pháp xử lý colspan

Tôi có một giải pháp dựa trên việc khớp cạnh tdtrái của cạnh trái với cạnh tương ứngth . Nó sẽ xử lý các colspans phức tạp tùy ý.

Tôi đã sửa đổi trường hợp thử nghiệm để cho thấy rằng tùy ý colspanđược xử lý chính xác.

Bản thử trực tiếp

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>

Bạn có thể làm điều đó bằng cách sử dụng chỉ mục của td:

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

Giải pháp của JavaScript thuần túy:

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

Tìm sự phù hợp thcho a td, có tính đến colspancác vấn đề về chỉ mục.

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

Điều đó thật đơn giản, nếu bạn tham chiếu chúng theo chỉ mục. Nếu bạn muốn ẩn cột đầu tiên, bạn sẽ:

Sao chép mã

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

Lý do đầu tiên tôi chọn tất cả các hàng trong bảng và sau đó cả td và th là con thứ n là để chúng ta không phải chọn bảng và tất cả các hàng trong bảng hai lần. Điều này cải thiện tốc độ thực thi tập lệnh. Hãy ghi nhớ, nth-child()là 1dựa trên, không phải 0.