質問編集履歴
5
タイトルを変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1つ目のテーブルのtdをクリックすると、2つ目のテーブルの同じ位置にあるtd縦一列の背景色を変更させたい
|
test
CHANGED
|
File without changes
|
4
テーブル二つの場合に絞る
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
1つ目のテーブルのtdをクリックすると、2つ目のテーブルの同じ位置にあるtd縦一列の背景色を変更させたい。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -17,6 +17,30 @@
|
|
|
17
17
|
```html
|
|
18
18
|
|
|
19
19
|
<table id="table">
|
|
20
|
+
|
|
21
|
+
<tbody>
|
|
22
|
+
|
|
23
|
+
<tr>
|
|
24
|
+
|
|
25
|
+
<td>1 </td>
|
|
26
|
+
|
|
27
|
+
<td>2</td>
|
|
28
|
+
|
|
29
|
+
<td>3</td>
|
|
30
|
+
|
|
31
|
+
<td>4</td>
|
|
32
|
+
|
|
33
|
+
<td>5</td>
|
|
34
|
+
|
|
35
|
+
</tr>
|
|
36
|
+
|
|
37
|
+
</tbody>
|
|
38
|
+
|
|
39
|
+
</table>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
<table id="targetTable">
|
|
20
44
|
|
|
21
45
|
<tbody>
|
|
22
46
|
|
|
@@ -118,31 +142,33 @@
|
|
|
118
142
|
|
|
119
143
|
var selected_td = $("#table td");
|
|
120
144
|
|
|
145
|
+
var target_td = $("#targetTable td");
|
|
146
|
+
|
|
121
147
|
$(selected_td).on("click", function() {
|
|
122
148
|
|
|
123
|
-
var nthItem =
|
|
149
|
+
var nthItem = $("#table td").index(this);
|
|
124
150
|
|
|
125
|
-
|
|
151
|
+
target_td.removeClass("is-selected");
|
|
126
152
|
|
|
127
153
|
if (nthItem === 0) {
|
|
128
154
|
|
|
129
|
-
$("#table td:nth-child(1)").addClass("is-selected");
|
|
155
|
+
$("#targetTable td:nth-child(1)").addClass("is-selected");
|
|
130
156
|
|
|
131
157
|
} else if (nthItem === 1) {
|
|
132
158
|
|
|
133
|
-
$("#table td:nth-child(2)").addClass("is-selected");
|
|
159
|
+
$("#targetTable td:nth-child(2)").addClass("is-selected");
|
|
134
160
|
|
|
135
161
|
} else if (nthItem === 2) {
|
|
136
162
|
|
|
137
|
-
$("#table td:nth-child(3)").addClass("is-selected");
|
|
163
|
+
$("#targetTable td:nth-child(3)").addClass("is-selected");
|
|
138
164
|
|
|
139
165
|
} else if (nthItem === 3) {
|
|
140
166
|
|
|
141
|
-
$("#table td:nth-child(4)").addClass("is-selected");
|
|
167
|
+
$("#targetTable td:nth-child(4)").addClass("is-selected");
|
|
142
168
|
|
|
143
169
|
} else if (nthItem === 4) {
|
|
144
170
|
|
|
145
|
-
$("#table td:nth-child(5)").addClass("is-selected");
|
|
171
|
+
$("#targetTable td:nth-child(5)").addClass("is-selected");
|
|
146
172
|
|
|
147
173
|
}
|
|
148
174
|
|
|
@@ -158,8 +184,6 @@
|
|
|
158
184
|
|
|
159
185
|
### サンプル
|
|
160
186
|
|
|
161
|
-
[テーブル一つ](https://jsfiddle.net/190zk4k3/2/)
|
|
162
|
-
|
|
163
187
|
[テーブル二つ](https://jsfiddle.net/190zk4k3/3/)
|
|
164
188
|
|
|
165
189
|
どうぞよろしくお願いいたします。
|
3
テーブル二つの場合を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -158,8 +158,8 @@
|
|
|
158
158
|
|
|
159
159
|
### サンプル
|
|
160
160
|
|
|
161
|
-
[
|
|
161
|
+
[テーブル一つ](https://jsfiddle.net/190zk4k3/2/)
|
|
162
162
|
|
|
163
|
-
|
|
163
|
+
[テーブル二つ](https://jsfiddle.net/190zk4k3/3/)
|
|
164
164
|
|
|
165
165
|
どうぞよろしくお願いいたします。
|
2
タイトルを変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
冗長なif
|
|
1
|
+
冗長なif文を配列化したい
|
test
CHANGED
|
File without changes
|
1
コード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
|
|
121
121
|
$(selected_td).on("click", function() {
|
|
122
122
|
|
|
123
|
-
var nthItem =
|
|
123
|
+
var nthItem = selected_td.index(this);
|
|
124
124
|
|
|
125
125
|
selected_td.removeClass("is-selected");
|
|
126
126
|
|