Question

我有一个表，该表的标题如下所示：

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)进行迭代时，它会在[First name, Last Name, Day 1, Day 2, Session1-to-session4, SESSION1-to-SESSION2]列上进行迭代，并且这里出现了问题。

我认为下面的行引起了问题。

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

我该如何解决问题？

Answer 1

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>

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

1 个答案: