单击单元格时获取列标题

Question

我想在单元格单击上获取表格的列标题。我已尝试如下。现在所有 th 值都在显示。现在获取相关的 th 值。

$('td').click(function() {
    var txt = $(this).text();
	var label=$(this).closest('tr').find('.label').text();
	var header=$(this).closest('table').find('th').text();
    console.log(txt + ':' +label + ':'+header);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead id="thead">
  <th></th>
  <th>Week 1 </th>
   <th>Week 2 </th>
   <th>Week 3 </th>
   <th>Week 4 </th></thead>
  <tbody id="tbody"><tr><td class="label">test1</td><td>5</td><td>2</td><td>7</td><td>1</td></tr><tr><td class="label">test2</td><td>9</td><td>15</td><td>12</td><td>4</td></tr><tr><td class="label">test3</td><td>32</td><td>12</td><td>23</td><td>28</td></tr><tr><td class="label">test4</td><td>1</td><td>0</td><td>0</td><td>0</td></tr></tbody>
  <tbody id="tfooter"><tr><td>Total</td><td>145</td><td>120</td><td>157</td><td>162</td></tr></tbody>
</table>

Answer 1

要完成此工作，您需要获取与行中th单击的索引相匹配的。td为此，请使用index()和eq()，如下所示：

$('td').click(function() {
  let $cell = $(this);
  let txt = $cell.text();
  let label = $cell.closest('tr').find('.label').text();
  let header = $cell.closest('table').find('th').eq($cell.index()).text();
  console.log(txt + ':' + label + ':' + header);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead id="thead">
    <th></th>
    <th>Week 1 </th>
    <th>Week 2 </th>
    <th>Week 3 </th>
    <th>Week 4 </th>
  </thead>
  <tbody id="tbody">
    <tr>
      <td class="label">test1</td>
      <td>5</td>
      <td>2</td>
      <td>7</td>
      <td>1</td>
    </tr>
    <tr>
      <td class="label">test2</td>
      <td>9</td>
      <td>15</td>
      <td>12</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="label">test3</td>
      <td>32</td>
      <td>12</td>
      <td>23</td>
      <td>28</td>
    </tr>
    <tr>
      <td class="label">test4</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody id="tfooter">
    <tr>
      <td>Total</td>
      <td>145</td>
      <td>120</td>
      <td>157</td>
      <td>162</td>
    </tr>
  </tbody>
</table>