teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ボタンを押すことでtableタグ内の特定の列が表示/非表示されるようにしたい

編集履歴

質問編集履歴

9

質問内容を加筆しました

2020/11/20 15:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -158,6 +158,8 @@
158
158
 
159
159
  $('[data-selection="2"]').removeClass('hide')
160
160
 
161
+ $('tbody td').removeClass('hide')
162
+
161
163
  };
162
164
 
163
165
  })
@@ -176,6 +178,8 @@
176
178
 
177
179
  $('[data-selection="2"]').removeClass('hide')
178
180
 
181
+ $('tbody td').removeClass('hide')
182
+
179
183
  $('[type="checkbox"]').prop('checked', false);
180
184
 
181
185
  })
@@ -238,9 +242,13 @@
238
242
 
239
243
  実行ボタンを押したところ、hideクラスがついている0番目の列だけ消えてしまいます。
240
244
 
241
- hideクラスがついた複数の列を消すにはeach()を使えばいいのだと思ったのですが、
245
+ hideクラスがついた複数の列を消すにはeach()を使えばいいのだと思うのですが、
246
+
242
-
247
+ うまくいきません。
248
+
249
+ あと、別のボタンを押すことで消えていた<th>が復活しても<td>は再表示されません。
250
+
243
- どう書けばいいのかわからなくなってしまいました。
251
+ <td>の切替も併せて、どう書けばいいのかわからなくなってしまいました。
244
252
 
245
253
 
246
254
 

8

jqueryの修正をしました

2020/11/20 15:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -190,53 +190,55 @@
190
190
 
191
191
  ```jquery
192
192
 
193
+ $(function() {
194
+
193
- $('.execution').click(function() {
195
+ $('.execution').click(function() {
196
+
197
+
198
+
194
-
199
+ var hide = $('.hide');
200
+
195
- var col_no = $("thead th").index('.hide');
201
+ var col_no = $(hide).index('thead th');
196
202
 
197
203
  var temp ="";
198
204
 
199
205
 
200
206
 
207
+ $('td').each(function(index, element) {
208
+
209
+
210
+
201
- for(var i=1; i < ($("tbody").children().length + 1); i++){
211
+ for(var i=1; i < ($("tbody").children().length + 1); i++){
202
-
203
-
204
-
212
+
213
+
214
+
205
- temp += $("tr:eq(" + i + ") td:eq(" + col_no + ")" ).text() + " ";
215
+ var grp = $("tr:eq(" + i + ") td:eq(" + col_no + ")" );
216
+
217
+
218
+
206
-
219
+ $(grp).addClass("hide");
220
+
207
- }
221
+ }
208
-
222
+
223
+
224
+
209
- alert(temp);
225
+ });
210
-
226
+
227
+
228
+
211
- console.log(col_no);
229
+ })
212
230
 
213
231
  });
214
232
 
215
- // hideクラスがついた<th>の下に配置されたtbodyのtd列を取得したい
216
-
217
- // 取得した列の全てのtdにhideクラスを追加したい
218
-
219
- // theadのthにhideクラスが削除されたらtbodyのtdのhideクラスも削除されたい
220
-
221
-
222
-
223
- });
224
-
225
233
 
226
234
 
227
235
  ```
228
236
 
229
237
  ### 試したこと
230
238
 
231
- ありがとうございます。
232
-
233
- htmlのthead内に記載された最初の<th>を<td>に変えて、
234
-
235
- jqueryのindex()を変更しました。
236
-
237
- 実行ボタンを押したところ-1が返されたので、hideクラスがついた列番号を取得できなかったんだと思います。
239
+ 実行ボタンを押したところ、hideクラスがついている0番目の列だけ消えてしまいます。
238
-
240
+
239
- また複数のhideを取得するのにeach()を使うのでしょうか？
241
+ hideクラスがついた複数の列を消すにはeach()を使えばいいのだと思ったのですが、
240
242
 
241
243
  どう書けばいいのかわからなくなってしまいました。
242
244
 

7

前提・実現したいことをより詳しく書きました

2020/11/20 15:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,12 @@
1
+ ### 前提・実現したいこと
2
+
1
- ボタンを押すと、tableタグ内の特定の列が表示/非表示されるようにしたい。
3
+ ボタンを押すと、tableタグ内の特定の列の<th>にクラス名が追加されることで、
4
+
5
+ 真下の<td>列にも同じクラス名が追加され、非表示されるようにしたい。
6
+
7
+ また初めについた<th>のクラス名が削除されると、同じ列の<td>についていたクラス名も削除されるように
8
+
9
+ なってほしいのですが、書き方がわかりません。
2
10
 
3
11
 
4
12
 

6

jqueryの修正をしました

2020/11/20 14:50

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -184,7 +184,7 @@
184
184
 
185
185
  $('.execution').click(function() {
186
186
 
187
- var col_no = $('.hide').index("thead th");
187
+ var col_no = $("thead th").index('.hide');
188
188
 
189
189
  var temp ="";
190
190
 

5

htmlを修正しました

2020/11/20 14:46

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -96,18 +96,6 @@
96
96
 
97
97
  </tr>
98
98
 
99
- <tr>
100
-
101
- <th>テキストC</th>
102
-
103
- <td>テキストC-1</td>
104
-
105
- <td>テキストC-2</td>
106
-
107
- <td>テキストC-3</td>
108
-
109
- </tr>
110
-
111
99
  </tbody>
112
100
 
113
101
  </table>

4

htmlを修正しました

2020/11/20 14:41

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -96,6 +96,18 @@
96
96
 
97
97
  </tr>
98
98
 
99
+ <tr>
100
+
101
+ <th>テキストC</th>
102
+
103
+ <td>テキストC-1</td>
104
+
105
+ <td>テキストC-2</td>
106
+
107
+ <td>テキストC-3</td>
108
+
109
+ </tr>
110
+
99
111
  </tbody>
100
112
 
101
113
  </table>

3

htmlとjqueryの変更

2020/11/20 14:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
  <tr>
60
60
 
61
- <th></th>
61
+ <td></td>
62
62
 
63
63
  <th data-selection="1">アイテム1-1</th>
64
64
 
@@ -182,35 +182,31 @@
182
182
 
183
183
  ```jquery
184
184
 
185
- $(function() {
186
-
187
- $('.execution').click(function() {
185
+ $('.execution').click(function() {
188
-
189
- var hide = $('.hide');
186
+
190
-
191
- var col_no = $('thead th').index(hide); // hideクラスがついたthの列番号を取得したい
187
+ var col_no = $('.hide').index("thead th");
192
-
188
+
193
- var temp ="";
189
+ var temp ="";
194
-
195
-
196
-
190
+
191
+
192
+
197
- for(var i=1; i < ($("tbody").children().length + 1); i++){
193
+ for(var i=1; i < ($("tbody").children().length + 1); i++){
198
-
199
- //i行目の、指定列(col_no)のtdの値を取得したつもり
194
+
200
-
195
+
196
+
201
- temp += $("tr:eq(" + i + ") td:eq(" + col_no + ")" ).text() + " ";
197
+ temp += $("tr:eq(" + i + ") td:eq(" + col_no + ")" ).text() + " ";
202
-
198
+
203
- }
199
+ }
200
+
204
-
201
+ alert(temp);
205
-
206
-
202
+
207
- console.log(temp);// 右にひとつずれた列が取得される
203
+ console.log(col_no);
208
-
204
+
209
- });
205
+ });
210
-
206
+
211
- // 取得した列番号の下に配置されたtbodyのtdを取得したい
207
+ // hideクラスがついた<th>の下に配置されたtbodyのtd列を取得したい
212
-
208
+
213
- // 取得したtdにhideクラスを追加したい
209
+ // 取得した列の全てのtdにhideクラスを追加したい
214
210
 
215
211
  // theadのthにhideクラスが削除されたらtbodyのtdのhideクラスも削除されたい
216
212
 
@@ -226,15 +222,15 @@
226
222
 
227
223
  ありがとうございます。
228
224
 
225
+ htmlのthead内に記載された最初の<th>を<td>に変えて、
226
+
229
227
  jqueryのindex()を変更しました。
230
228
 
231
- hideクラスがついた列番号は取得できたのですが、
229
+ 実行ボタンを押したところ-1が返されたので、hideクラスがついた列番号を取得できなかったんだと思います。
232
-
233
- この取得したcol_noをどう活用したらいいのかわかりません。
230
+
234
-
235
- また複数のhideを取得するのにeach()を使うことはわかったのですが、
231
+ また複数のhideを取得するのにeach()を使うのでしょうか？
236
-
232
+
237
- どこに書けばいいのかわからなくなりました。
233
+ どう書けばいいのかわからなくなってしまいました。
238
234
 
239
235
 
240
236
 

2

2020/11/20 09:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -224,7 +224,7 @@
224
224
 
225
225
  ### 試したこと
226
226
 
227
-
227
+ ありがとうございます。
228
228
 
229
229
  jqueryのindex()を変更しました。
230
230
 

1

jqueryのindex()を変更しました

2020/11/18 14:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -186,19 +186,35 @@
186
186
 
187
187
  $('.execution').click(function() {
188
188
 
189
+ var hide = $('.hide');
190
+
189
- var col_no = $('.hide').index(this); // hideクラスがついたthの列番号を取得したい
191
+ var col_no = $('thead th').index(hide); // hideクラスがついたthの列番号を取得したい
192
+
193
+ var temp ="";
190
194
 
191
195
 
192
196
 
197
+ for(var i=1; i < ($("tbody").children().length + 1); i++){
198
+
199
+ //i行目の、指定列(col_no)のtdの値を取得したつもり
200
+
201
+ temp += $("tr:eq(" + i + ") td:eq(" + col_no + ")" ).text() + " ";
202
+
203
+ }
204
+
205
+
206
+
207
+ console.log(temp);// 右にひとつずれた列が取得される
208
+
209
+ });
210
+
193
211
  // 取得した列番号の下に配置されたtbodyのtdを取得したい
194
212
 
195
213
  // 取得したtdにhideクラスを追加したい
196
214
 
197
215
  // theadのthにhideクラスが削除されたらtbodyのtdのhideクラスも削除されたい
198
216
 
199
- });
217
+
200
-
201
-
202
218
 
203
219
  });
204
220
 
@@ -210,13 +226,15 @@
210
226
 
211
227
 
212
228
 
229
+ jqueryのindex()を変更しました。
230
+
231
+ hideクラスがついた列番号は取得できたのですが、
232
+
233
+ この取得したcol_noをどう活用したらいいのかわかりません。
234
+
213
- theadのthをクリックした時に、tbodyのtd列を取得することはできたのですが、
235
+ また複数のhideを取得するのにeach()を使うことはわかったのですが、
214
-
215
- 複数のtdにクラス名を追加することができませんでした。
236
+
216
-
217
- また、table外にあるボタンをクリックすることで特定の列情報を取得したいのですが、
218
-
219
- 想定している列情報を取得できませんでした。
237
+ どこに書けばいいのかわからなくなりました。
220
238
 
221
239
 
222
240