nth-child()の疑似クラスで要素の番号を指定する方法を知りたい

###実現したいこと
ストライプテーブルを作成しています。
更にマウスオーバーした時、行や列をハイライト表示出来るようにしています。
ただ、JavaScript のコードが汎用性に欠ける点を改善したいと思っています。

発生している問題・エラーメッセージ

JavaScript
1td[pos].classList.add('tdhover');
2td[pos + 3].classList.add('tdhover');
3td[pos + 6].classList.add('tdhover');
4td[pos + 9].classList.add('tdhover');
5td[pos + 12].classList.add('tdhover');

上記のコードを簡略化したい。
列が増えても修正が必要無いようにしたい。
自分で色々調べながら行ったのですが、ここまでが精一杯でした。
つたない説明ですが、ご教授頂けると幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>ストライプテーブル</title>
6  <link rel="stylesheet" href="css/common.css">
7</head>
8<body>
9  <table>
10    <thead>
11      <tr>
12        <th>見出し１</th>
13        <th>見出し２</th>
14        <th>見出し３</th>
15      </tr>
16    </thead>
17    <tbody>
18      <tr>
19        <td>データ１</td>
20        <td>データ２</td>
21        <td>データ３</td>
22      </tr>
23      <tr>
24        <td>データ４</td>
25        <td>データ５</td>
26        <td>データ６</td>
27      </tr>
28      <tr>
29        <td>データ７</td>
30        <td>データ８</td>
31        <td>データ９</td>
32      </tr>
33      <tr>
34        <td>データ１０</td>
35        <td>データ１１</td>
36        <td>データ１２</td>
37      </tr>
38      <tr>
39        <td>データ１３</td>
40        <td>データ１４</td>
41        <td>データ１５</td>
42      </tr>
43    </tbody>
44  </table>
45  <script src="js/main.js"></script>
46</body>
47</html>

css
1@charset "UTF-8";
2
3table {
4  margin: 50px auto;
5  border-collapse: collapse;
6}
7
8th {
9  background: #4f4f4f;
10  color: #fff;
11  width: 100px;
12}
13
14td {
15  text-align: center;
16}
17
18th, td {
19 padding: 5px;
20 border: 1px solid #000;
21}
22
23.striped {
24  background: #f2f2f2;
25}
26
27.trhover {
28  background: #5981a8;
29}
30
31.tdhover {
32 background: #0f365e;
33 color: #f2f2f2;
34}

JavaScript
1'use strict';
2
3const tr = document.querySelectorAll('tr');
4const th = document.querySelectorAll('th');
5const td = document.querySelectorAll('td');
6
7for(let i = 0; i < tr.length; i++){
8  if(i % 2 !== 0){
9    tr[i].classList.add('striped');
10  };
11  
12  tr[i].addEventListener('mouseover', () => {
13    tr[i].classList.add('trhover');
14  });
15  tr[i].addEventListener('mouseleave', () => {
16    tr[i].classList.remove('trhover');
17  });
18};
19
20for(let i = 0; i < td.length; i++){
21  const pos = i % th.length;
22  
23  td[i].addEventListener('mouseover', () => {
24    td[pos].classList.add('tdhover');
25    td[pos + 3].classList.add('tdhover');
26    td[pos + 6].classList.add('tdhover');
27    td[pos + 9].classList.add('tdhover');
28    td[pos + 12].classList.add('tdhover');
29  });
30
31  td[i].addEventListener('mouseleave', () => {
32    td[pos].classList.remove('tdhover');
33    td[pos + 3].classList.remove('tdhover');
34    td[pos + 6].classList.remove('tdhover');
35    td[pos + 9].classList.remove('tdhover');
36    td[pos + 12].classList.remove('tdhover');
37  });
38};

試したこと

forEach()のインデックスで要素の番号を取得出来ないか？
childrenを利用し要素の番号の取得出来ないか？

補足情報（FW/ツールのバージョンなど）

Win10
VS Code バージョン: 1.54.2
Google Chrome

行動規範の内容に同意します

回答1件

ベストアンサー

列にクラスを追加/削除する部分をforループにすればいいでしょう。

js
1'use strict';
2
3const tr = document.querySelectorAll('tr');
4const td = document.querySelectorAll('td');
5const collen = document.querySelectorAll('th').length;
6
7for(let i = 0; i < tr.length; i++){
8  if(i % 2 !== 0){
9    tr[i].classList.add('striped');
10  };
11
12  tr[i].addEventListener('mouseover', () => {
13    tr[i].classList.add('trhover');
14  });
15  tr[i].addEventListener('mouseleave', () => {
16    tr[i].classList.remove('trhover');
17  });
18};
19
20for(let i = 0; i < td.length; i++){
21  const pos = i % collen;
22  
23  td[i].addEventListener('mouseover', () => {    
24    for(let j = 0; j < td.length; j=j+collen){
25      td[pos + j].classList.add('tdhover');
26    };
27  });
28
29  td[i].addEventListener('mouseleave', () => {
30    for(let j = 0; j < td.length; j=j+collen){
31      td[pos + j].classList.remove('tdhover');
32    };
33  });
34};