jquery - 查找表头中带有子TH的表行的所有TH

我有一个表有一个标题，它有一个子标题，如下所示：

table, th, td {
  border: 1px solid black;
}

<table>
  <thead>
  <tr>
    <th rowspan="2">Fisrt Name</th>
    <th rowspan="2">Last Name</th>
    <th colspan="4">Day 1</th>
    <th colspan="4">Day 2</th>
  </tr>

  <tr>
    <th session-id="101">Session 1</th>
    <th session-id="102">Session 2</th>
    <th session-id="103">Session 3</th>
    <th session-id="104">Session 4</th>

    <th session-id="105">Session 1</th>
    <th session-id="106">Session 2</th>
    <th session-id="107">Session 3</th>
    <th session-id="108">Session 4</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td student-id="110">Foo</td>
    <td>Bar</td>

    <td>Present</td>
    <td>Absent</td>
    <td>Present</td>
    <td>Present</td>
    <td>Absent</td>
    <td>Present</td>
    <td>Present</td>
    <td>Present</td>
  </tr>
  </tbody>
</table>

我想得到每个学生的出勤数据。我使用这个jQuery代码遍历表行的所有列。问题是最后一些列没有被考虑。

 $('#attendanceTable tbody > tr')
    .each(function(i, row) {
        var studentId = '';
        var list = [];

        $(row)
            .find('td')
            .each(function(j, column) {
                if (j === 0) {
                    studentId = $(column).attr('student-id');
                }
                else
                {
                    // Each session tds has a session id
                    var $th = $(column).closest('table').find('th').eq($(column).index());
                    var sessionId = $th.attr('session-id');

                    if (sessionId){
                        list.push(sessionId);
                    }
                }
            });
        // do sth with list
        list = [];
    });

每行有10列，但是当通过$(row).find('td').each(function(j, column)进行迭代时，它会在这个列上进行迭代，这里会出现问题。
我想是下面这一行引起了这个问题。

var $th = $(column).closest('table').find('th').eq($(column).index());

我怎样才能解决这个问题？

最佳答案

rowspan属性扰乱了计算。您也没有考虑标题单元格跨两行分布的事实。您可以这样重构代码，更重要的是，只需从.index()中减去2即可找到匹配的头：

var $table = $("#attendanceTable");
var $headers = $table.find("thead > tr:nth-child(2) th");
$table.find("tbody > tr").each(function() {
  var studentId = $(this).find("td:nth-child(1)").attr("student-id");
  var list = [];
  /* td:nth-child(n+3) means third cell and onwards */
  $(this).find("td:nth-child(n+3)").each(function() {
    var $th = $headers.eq($(this).index() - 2);
    var sessionId = $th.attr("session-id");
    list.push(sessionId);
  });
  console.log(list);
});

table,
th,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<table id="attendanceTable">
  <thead>
    <tr>
      <th rowspan="2">Fisrt Name</th>
      <th rowspan="2">Last Name</th>
      <th colspan="4">Day 1</th>
      <th colspan="4">Day 2</th>
    </tr>
    <tr>
      <th session-id="101">Session 1</th>
      <th session-id="102">Session 2</th>
      <th session-id="103">Session 3</th>
      <th session-id="104">Session 4</th>
      <th session-id="105">Session 1</th>
      <th session-id="106">Session 2</th>
      <th session-id="107">Session 3</th>
      <th session-id="108">Session 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td student-id="110">Foo</td>
      <td>Bar</td>
      <td>Present</td>
      <td>Absent</td>
      <td>Present</td>
      <td>Present</td>
      <td>Absent</td>
      <td>Present</td>
      <td>Present</td>
      <td>Present</td>
    </tr>
  </tbody>
</table>