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

Question

我有下表：

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

给定第三行（或更高）行中单元格的索引，如何使用jQuery查找与该单元格关联的标题。

换句话说，如果点击了单元格F，我该如何返回catgy 2和item3？

Answer 1

我们所知道的

我们可以轻松获取点击单元格的索引。假设我们有一个点击处理程序：

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