javascript - 获取一行中复选框的标题名称

Question

我在网格中有一个复选框，我需要通过单击网格外部的按钮来查找该特定元素的标题名称。

我的网格结构如下:

<thead class="k-grid-header">
  <tr role="row">
    <th scope="col" class="k-header">Type</th>
    <th scope="col" class="k-header" colspan="2">Building</th>
    <th scope="col" class="k-header" colspan="3">Manufacture</th>
    <th scope="col" class="k-header" colspan="3">Building2</th>
    <th scope="col" class="k-header" colspan="3">Manufacture2</th>
  </tr>
</thead>
<tbody role="group">
  <tr>
     <td>
       <input type="checkbox" class="Tags" >
     </td>
     ... other td tags without checkbox
  </tr>
</tbody>

在我的 javascript 文件中，单击按钮时我得到的对象为:

var objectCheckBox= $("input[class=Tags]:checked");

现在 objectCheckBox 将包含选中的元素。我需要找到该特定列的标题名称，我尝试了以下方法但没有找到解决方案:

objectCheckBox[i].parentNode.parentNode.children[1].innerText .

如何在 jquery 或 javascript 中获取 header 名称？

Answer 1

1. 使用选中复选框的父 TD 的索引。
2. 用它来选择 th 并获取文本

var ind = $("input[class=Tags]:checked").parent('td').index();
console.log(ind)
console.log($('.k-header').eq(ind).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead class="k-grid-header">
  <tr role="row">
    <th scope="col" class="k-header">Type</th>
    <th scope="col" class="k-header" colspan="2">Building</th>
    <th scope="col" class="k-header" colspan="3">Manufacture</th>
    <th scope="col" class="k-header" colspan="3">Building2</th>
    <th scope="col" class="k-header" colspan="3">Manufacture2</th>
  </tr>
</thead>
<tbody role="group">
  <tr>
    <td>
      <input type="checkbox" class="Tags" checked />
    </td>

  </tr>
</tbody>
</table>