質問編集履歴

7

2019/09/25 06:43

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -2,33 +2,47 @@
2
2
 
3
3
  <table>
4
4
 
5
- <tr>
5
+ <thead>
6
6
 
7
- <td class="before01">内容01-1</td>
7
+ <th class="sort" data-sort="group-a">A</th>
8
8
 
9
- <td class="after01">内容01-2</td>
9
+ <th class="sort" data-sort="group-b">B</th>
10
10
 
11
- <td>内容02</td>
11
+ <th class="sort" data-sort="group-c">C</th>
12
12
 
13
- <td>内容03</td>
13
+ </thead>
14
14
 
15
- </tr><tr>
15
+ <tbody>
16
16
 
17
- <td>内容04</td>
17
+ <tr>
18
18
 
19
- <td class="before01">内容05-1</td>
19
+ <td class="group-a before01">内容01-1</td>
20
20
 
21
- <td class="after01">内容05-2</td>
21
+ <td class="group-a after01">内容01-2</td>
22
22
 
23
- <td>内容06</td>
23
+ <td class="group-b">内容02</td>
24
24
 
25
+ <td class="group-c">内容03</td>
26
+
27
+ </tr><tr>
28
+
29
+ <td class="group-a">内容04</td>
30
+
31
+ <td class="group-b before01">内容05-1</td>
32
+
33
+ <td class="group-b after01">内容05-2</td>
34
+
35
+ <td class="group-a">内容06</td>
36
+
25
- </tr>
37
+ </tr>
26
38
 
27
39
 
28
40
 
29
41
 
30
42
 
31
43
 
44
+
45
+ <tbody>
32
46
 
33
47
  </table>
34
48
 

6

2019/09/25 06:43

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  この様なhtmlでチェックボックス「ID:change01」をクリックした時に、クラス「before01」と「after01」の表示を切り替えたいと思っています。
46
46
 
47
- 各列にList.jsによるソートをかけているので、単純なhide/showではなく、要素の位置をなければなりせん
47
+ 各列にList.jsによるソート(指定したクラスでソート)をかけているので、要素の位置を前後に入れ替た上で要素を表示/非表示にしてい
48
48
 
49
49
 
50
50
 
@@ -84,7 +84,7 @@
84
84
 
85
85
  ここまでは出来たのですが、チェックを外した際にすべての値が返ってきてしまいました。
86
86
 
87
- どうしたら各要素毎に変更する事ができるのでしょうか?
87
+ どうしたら各要素毎に入れ替えと表示/非表示ができるのでしょうか?
88
88
 
89
89
  教えていただけるとありがたいです。
90
90
 

5

2019/09/25 03:59

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -76,7 +76,7 @@
76
76
 
77
77
  ```css
78
78
 
79
- .after{display:none;}
79
+ .after01{display:none;}
80
80
 
81
81
  ```
82
82
 

4

2019/09/25 01:48

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -78,8 +78,6 @@
78
78
 
79
79
  .after{display:none;}
80
80
 
81
- コード
82
-
83
81
  ```
84
82
 
85
83
 

3

2019/09/25 01:48

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -56,13 +56,13 @@
56
56
 
57
57
  if ($(this).is(':checked')) {
58
58
 
59
- $('.after01').after($('before01')).show();
59
+ $('.after01').after($('.before01')).show();
60
60
 
61
61
  $('.before01').hide();
62
62
 
63
63
  } else {
64
64
 
65
- $('.before01').after($('after01')).show();
65
+ $('.before01').after($('.after01')).show();
66
66
 
67
67
  $('.after01').hide();
68
68
 

2

2019/09/25 01:47

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <td>内容03</td>
14
14
 
15
- </tr>
15
+ </tr><tr>
16
16
 
17
17
  <td>内容04</td>
18
18
 
@@ -22,13 +22,13 @@
22
22
 
23
23
  <td>内容06</td>
24
24
 
25
+ </tr>
26
+
25
27
 
26
28
 
27
29
 
28
30
 
29
31
 
30
-
31
- </tr>
32
32
 
33
33
  </table>
34
34
 

1

2019/09/25 01:46

投稿

babystardust
babystardust

スコア5

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  $('.before01').after($('after01')).show();
66
66
 
67
- $('.after').hide();
67
+ $('.after01').hide();
68
68
 
69
69
  }
70
70