回答編集履歴

1

いちおう

2019/10/23 01:43

投稿

yambejp
yambejp

スコア116688

test CHANGED
@@ -5,3 +5,97 @@
5
5
  以前もお伝えしたかもしれませんが正しいHTMLを書くところから
6
6
 
7
7
  始めてください
8
+
9
+
10
+
11
+ # sample
12
+
13
+ テーブルを整え、カスタムデータを使って適当にグルーピングしました
14
+
15
+
16
+
17
+ ```javascript
18
+
19
+ <script>
20
+
21
+ $(function(){
22
+
23
+ $('tr[data-position=body]').hide();
24
+
25
+ $('tr[data-position=head]').on('click',function(){
26
+
27
+ $('tr[data-kind='+$(this).data('kind')+']').not($(this)).toggle();
28
+
29
+ });
30
+
31
+ });
32
+
33
+ </script>
34
+
35
+ <table border="1">
36
+
37
+ <tbody>
38
+
39
+ <tr data-kind="machine" data-position="head">
40
+
41
+ <td colspan="2">所有機器</td>
42
+
43
+ </tr>
44
+
45
+ <tr data-kind="machine" data-position="body">
46
+
47
+ <td>1</td>
48
+
49
+ <td>iPhone</td>
50
+
51
+ </tr>
52
+
53
+ <tr data-kind="machine" data-position="body">
54
+
55
+ <td>2</td>
56
+
57
+ <td>iPad</td>
58
+
59
+ </tr>
60
+
61
+ <tr data-kind="machine" data-position="body">
62
+
63
+ <td>3</td>
64
+
65
+ <td>iPod</td>
66
+
67
+ </tr>
68
+
69
+ <tr data-kind="machine" data-position="body">
70
+
71
+ <td>4</td>
72
+
73
+ <td>Mac Book Pro</td>
74
+
75
+ </tr>
76
+
77
+ <tr data-kind="car" data-position="head">
78
+
79
+ <td colspan="2">所有車</td>
80
+
81
+ <tr data-kind="car" data-position="body">
82
+
83
+ <td>1</td>
84
+
85
+ <td>コロナ</td>
86
+
87
+ </tr>
88
+
89
+ <tr data-kind="car" data-position="body">
90
+
91
+ <td>2</td>
92
+
93
+ <td>ミラ</td>
94
+
95
+ </tr>
96
+
97
+ </tbody>
98
+
99
+ </table>
100
+
101
+ ```