Найти все TH строки таблицы, которая имеет заголовок с дочерними TH - PullRequest
Новая
       11

Найти все TH строки таблицы, которая имеет заголовок с дочерними TH

0 голосов
/ 31 декабря 2018

У меня есть таблица с заголовком, который имеет дочерний заголовок, как показано ниже: 

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());

Как мне решить проблему?

1 Ответ

0 голосов
/ 31 декабря 2018

Атрибут rowspan запутывает вычисления.Вы также не учитываете тот факт, что ячейки заголовка распределены по двум строкам.Вы можете изменить код, как этот, и, что более важно, просто вычесть 2 из .index(), чтобы найти соответствующий заголовок: 

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>
...