テーブル内のtdの中にあるチェックボックスをチェックして、テーブルの同じ位置にあるtd縦一列の背景色を変更させたい

前提・実現したいこと

1つ目のテーブルのtdをクリックすると、2つ目のテーブルの同じ位置にあるtd縦一列の背景色を変更させたいに関連した質問です。

テーブル内のtdの中にあるチェックボックスをチェックすると、テーブルの同じ位置にあるtd縦一列の背景色を変更させる、という処理を実現したいのですがうまくいきません。

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

.index()で値がうまく取れません。

該当のソースコード

html
1<table id="table">
2  <tbody>
3    <tr>
4      <td>1</td>
5      <td>2</td>
6      <td>3</td>
7      <td>4</td>
8      <td>5</td>
9    </tr>
10  </tbody>
11</table>
12
13<table id="targetTable">
14  <tbody>
15    <tr>
16      <td><input type="checkbox"></td>
17      <td><input type="checkbox"></td>
18      <td><input type="checkbox"></td>
19      <td><input type="checkbox"></td>
20      <td><input type="checkbox"></td>
21    </tr>
22    <tr>
23      <td><input type="checkbox"></td>
24      <td><input type="checkbox"></td>
25      <td><input type="checkbox"></td>
26      <td><input type="checkbox"></td>
27      <td><input type="checkbox"></td>
28    </tr>
29    <tr>
30      <td><input type="checkbox"></td>
31      <td><input type="checkbox"></td>
32      <td><input type="checkbox"></td>
33      <td><input type="checkbox"></td>
34      <td><input type="checkbox"></td>
35    </tr>
36  </tbody>
37</table>

css
1table,
2td,
3th {
4  border: 1px solid #595959;
5  border-collapse: collapse;
6}
7
8td,
9th {
10  padding: 3px;
11  width: 30px;
12  height: 25px;
13}
14
15th {
16  background: #f0e6cc;
17}
18
19td.is-selected {
20  background: #caf8da;
21}
22
23.even {
24  background: #fbf8f0;
25}
26
27.odd {
28  background: #fefcf9;
29}
30

js
1$(function () {
2  $('input[type="checkbox"]').on("change", function () {
3    var idx = $(this).closest("tr").find("td").index(this);
4    $("#table td,#targetTable td").removeClass("is-selected").filter(function () {
5      return $(this).closest("tr").find("td").index(this) == idx;
6    }).addClass("is-selected");
7  });
8});

サンプル

どうぞよろしくおねがいいたします。

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

回答1件

ベストアンサー

thisはチェックボックスになっているので、
indexには、その親のtdを入れなければなりません。

js
1$(function () {
2  $('input[type="checkbox"]').on("change", function () {
3    var idx = $(this).closest("tr").find("td").index($(this).closest('td'));
4    $("#table td,#targetTable td").removeClass("is-selected").filter(function () {
5      return $(this).closest("tr").find("td").index($(this).closest('td')) == idx;
6    }).addClass("is-selected");
7  });
8});