前提・実現したいこと

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

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

if文で書いたコードで問題なく動いてはいるのですが、今後列数が増えていくと冗長なif文の繰り返しになってしまうので、これを配列化し最適化したいと考えております。

該当のソースコード

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>1</td>
17      <td>2</td>
18      <td>3</td>
19      <td>4</td>
20      <td>5</td>
21    </tr>
22    <tr>
23      <td></td>
24      <td></td>
25      <td></td>
26      <td></td>
27      <td></td>
28    </tr>
29    <tr>
30      <td></td>
31      <td></td>
32      <td></td>
33      <td></td>
34      <td></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
15td.is-selected {
16  background: #caf8da;
17}
18

js
1$(function() {
2  var selected_td = $("#table td");
3  var target_td = $("#targetTable td");
4  $(selected_td).on("click", function() {
5    var nthItem = $("#table td").index(this);
6    target_td.removeClass("is-selected");
7    if (nthItem === 0) {
8      $("#targetTable td:nth-child(1)").addClass("is-selected");
9    } else if (nthItem === 1) {
10      $("#targetTable td:nth-child(2)").addClass("is-selected");
11    } else if (nthItem === 2) {
12      $("#targetTable td:nth-child(3)").addClass("is-selected");
13    } else if (nthItem === 3) {
14      $("#targetTable td:nth-child(4)").addClass("is-selected");
15    } else if (nthItem === 4) {
16      $("#targetTable td:nth-child(5)").addClass("is-selected");
17    }
18  });
19});
20

サンプル

テーブル二つ
どうぞよろしくお願いいたします。

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

回答2件

ベストアンサー

おそらくこう

javascript
1$(function() {
2  $("#table td").on("click", function(){
3    var idx = $("#table td").index(this);
4    $("#table td").removeClass("is-selected").filter(function(){
5      return $(this).closest("tr").find("td").index(this)==idx;
6    }).addClass("is-selected");
7  });
8});

元の命題もそうだけどこれって1行目のクリックでしか列のselectedを移動できないですが
2行目以降のtdで移動しなくてもよいのですか？

どの行でも

javascript
1$(function() {
2   $("#table td").on("click", function(){
3    var idx = $(this).closest("tr").find("td").index(this);
4    $("#table td").removeClass("is-selected").filter(function(){
5      return $(this).closest("tr").find("td").index(this)==idx;
6    }).addClass("is-selected");
7  });
8});

2つテーブル

javascript
1$(function() {
2   $("#table td,#targetTable td").on("click", 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});

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    <tr>
11      <td></td>
12      <td></td>
13      <td></td>
14      <td></td>
15      <td></td>
16    </tr>
17    <tr>
18      <td></td>
19      <td></td>
20      <td></td>
21      <td></td>
22      <td></td>
23    </tr>
24  </tbody>
25</table>
26<br>
27<table id="targetTable">
28  <tbody>
29    <tr>
30      <td>1</td>
31      <td>2</td>
32      <td>3</td>
33      <td>4</td>
34      <td>5</td>
35    </tr>
36    <tr>
37      <td></td>
38      <td></td>
39      <td></td>
40      <td></td>
41      <td></td>
42    </tr>
43    <tr>
44      <td></td>
45      <td></td>
46      <td></td>
47      <td></td>
48      <td></td>
49    </tr>
50  </tbody>
51</table>

投稿2018/05/11 03:25

編集2018/05/11 04:35

yambejp

総合スコア114829

hibikikudo

2018/05/11 03:37

ご回答ありがとうございます。 yambejpさんの回答を参考にテーブル二つのケースで縦列一つ目のセルの色を変えることが可能になりました。縦列全てに背景色を変更するにはどうすれば良いでしょうか。 (https://jsfiddle.net/190zk4k3/4/)

yambejp

2018/05/11 04:12

どの行でも反応する処理を追記しておきました

hibikikudo

2018/05/11 04:50 編集

ありがとうございました。

hibikikudo

2018/05/11 06:09

上記方法で解決しました。フィルター関数で簡潔に書けるということ、大変勉強になりました。

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

要はクリックしたtdにis-selectedクラスを与えたいわけですよね

$(this)で「イベントが発生した自身」が取得できますので何番目かとる必要はありません。
※「自身が何番目を取得」というのでthisを利用されてるので惜しいところまでいってますね・・・

js
1$(function() {
2  var selected_td = $("#table td");
3  $(selected_td).on("click", function() {
4    selected_td.removeClass("is-selected");
5    $(this).addClass("is-selected");
6  });
7});
8

追記

テーブルが複数ある場合は「自分の親に所属するtdのみをremove()」みたいにすると良いかと

js
1$(function() {
2  $('table td').on("click", function() {
3    $(this).parent().find('td').removeClass("is-selected");
4    $(this).addClass("is-selected");
5  });
6});

もう少し簡潔にできそうには思いますが。。

投稿2018/05/11 03:14

編集2018/05/11 03:36

m.ts10806

総合スコア80850

hibikikudo

2018/05/11 03:25

ご回答ありがとうございます。例えばこのようにテーブルが複数ある場合もやはりthisで取得できるでしょうか。取得できない場合はどのように書けば良いでしょうか。 https://jsfiddle.net/190zk4k3/3/

m.ts10806

2018/05/11 03:26

テーブル自体が複数ある場合はそれぞれ親をわけないといけませんね。

m.ts10806

2018/05/11 03:31

それか table td としておいてremove先をかえるとか。

m.ts10806

2018/05/11 03:37

↑のコードを回答に追記しました。外部サービスは便利ですが何かでつながらなくなったときにコードが参照できなくなるのでなるべく回答にも追記してください。

hibikikudo

2018/05/11 03:41

「複数テーブル」の意図が伝わりにくくて失礼しました。一つづつのテーブルが別々に動くのではなく、2つがセットになっているイメージです。 `#table` のtdをクリックすると、 `targetTable` のtdが変化してほしいというものでした。

m.ts10806

2018/05/11 03:41

あ、table tdのtableははなくてもいいですね。

m.ts10806

2018/05/11 03:44 編集

> 一つづつのテーブルが別々に動くのではなく、2つがセットになっているイメージです。それなら単純に $('td').removeClass("is-selected"); とすれば良いです。もしかして誤解してるかもしれません。 1つ目のtdクリック→2つ目のテーブルの同じ位置にあるtdも背景色とかですか？

hibikikudo

2018/05/11 03:48

> 1つ目のtdクリック→2つ目のテーブルの同じ位置にあるtdも背景色はい。これが実現したいこととになります。より正確には「1つ目のテーブルのtdクリック→2つ目のテーブルの同じ位置にあるtd縦一列の背景色を変更したい」です。伝わりにくい説明で失礼しました。

m.ts10806

2018/05/11 03:50

なるほど。要件が当初とだいぶ変わってきているので、コメントに個々に書くのではなく質問にまとめてもらえますか？でないと質問と回答が乖離してしまいます。

hibikikudo

2018/05/11 03:56

ありがとうございます。質問を修正しました。

m.ts10806

2018/05/11 04:11

タイトルも変わってくるのではないでしょうか。既にif文の話ではなくなっています。