jquery - 访问html表格中给定单元格下方的表格单元格

我有下表：

  ------------------------------------------
 |   catgy 1      |catgy 2 |    catgy 3    |
 |------|---------|--------|----------------
 |item1 |item2    | item3  |    item4      |
 |--|---|--|------|---|----|------|---------
 |A |B  |C | D    | E | F  |    G | H      |
 |--|---|--|------|---|----|------|--------|

给定第三行（或更高行）中某个单元格的索引，如何使用jquery查找与该单元格关联的标题。
换句话说，如果单击cellF，我如何返回catgy 2和item3？

最佳答案

我们所知道的
我们可以很容易地得到点击单元格的索引。假设我们有一个单击处理程序：

$(document).on("click", "tr:gt(1) td", function(){

这将触发第二个标题行之后每个td单元格中的tr单元格。在这个函数中，我们可以使用以下方法获取单元格索引：

var cellIndex = $(this).index();

我们不知道的
我们不知道如何找到与列对应的头值。最简单的方法是在启动时初始化值。我将为每个标题行设置一个数组，这些标题行的内容适用于它们所应用的每个列索引。第一排看起来像：

var primaryHeader = [];
$("tr:eq(0)").children().each(function(){
    for (var i = 0; i < $(this).attr("colspan"); i++)
    {
        primaryHeader.push($(this).text());
    }
})

输出将["catgy 1", "catgy 1", "catgy 1", "catgy 1", "catgy 2", "catgy 2", "catgy 3", "catgy 3"]。
把它放在一起
现在，我们可以轻松地将标题与某个列索引相关联：

var header = primaryHeader[ $(this).index() ];

看看下面的工作

var primaryHeader = [],
    secondaryHeader = [];
$(document).ready(function(){
    $("tr:eq(0)").children().each(function(){
        for (var i = 0; i < $(this).attr("colspan"); i++)
        {
            primaryHeader.push($(this).text());
        }
    })
    console.log(primaryHeader);

    $("tr:eq(1)").children().each(function(){
        for (var i = 0; i < $(this).attr("colspan"); i++)
        {
            secondaryHeader.push($(this).text());
        }
    })
    console.log(secondaryHeader);
})

$(document).on("click", "tr:gt(1) td", function(){
    alert("primary header:" + primaryHeader[$(this).index()])
    alert("secondary header:" + secondaryHeader[$(this).index()])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" id="sample">
    <tr>
        <td colspan="4">catgy 1</td>
         <td colspan="2">catgy 2</td>
         <td colspan="2">catgy 3</td>

    </tr>
     <tr>
          <td colspan="2"> item1</td>
          <td colspan="2">item2</td>
          <td colspan="2">item3</td>
         <td colspan="2">item4</td>
     </tr>
     <tr>

          <td>A</td>
          <td>B</td>
          <td>A</td>
          <td>B</td>
         <td>A</td>
          <td>B</td>
          <td>A</td>
          <td>B</td>
     </tr>

</table>