在单击元素时获取简单表中的元素

Question

这是我的问题。

我有一个像这样的简单表格（示例）：

null

$('#tab tbody tr td').on('click', function() {
  var val = $(this).parent().find('table tbody tr th').text();
  console.log(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab">
  <thead>
    <tr>
      <th>
        Test 1
      </th>
      <th>
        Test 2
      </th>
      <th>
        Test 3
      </th>
      <th>
        Test 4
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </tbody>
</table>

null

并且我正在尝试console.log(..)列的名称，同时单击元素。

我想这可能是一个简单的解决办法但我找不到。

提前致谢

Answer 1

您可以使用:eq()&index()来实现这一点。

演示代码：

null

$('#tab tbody tr td').on('click', function() {
  var val = $(this).index(); //get index no of td
  console.log($("thead th:eq(" + val + ")").text().trim()); //get th value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab">
  <thead>
    <tr>
      <th>
        Test 1
      </th>
      <th>
        Test 2
      </th>
      <th>
        Test 3
      </th>
      <th>
        Test 4
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </tbody>
</table>