回答編集履歴

2

追記

2016/10/05 08:27

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -29,3 +29,161 @@
29
29
  ※thも対象ですか?軽微な修正なのでソースを修正しときました
30
30
 
31
31
  find('td')→find('td,th')
32
+
33
+
34
+
35
+ # 追記
36
+
37
+
38
+
39
+ よくみたらもとの機能はそのままなんですね
40
+
41
+ ではこんな感じで
42
+
43
+ ```javascript
44
+
45
+ $(function() {
46
+
47
+ $('#t1 tr:first-child th').on('click', function() {
48
+
49
+ var dow=$('#t1 tr:first-child th').index(this);
50
+
51
+ $('.js-dow').eq(dow).prop('checked',function( index, prop ){return !prop;}).change();
52
+
53
+ });
54
+
55
+ $('.js-dow').on('change', function() {
56
+
57
+ var flg=$(this).prop('checked');
58
+
59
+ var dow=$('.js-dow').index(this);
60
+
61
+ $('#t1 tr').each(function() {
62
+
63
+ $(this).find('td,th').eq(dow).toggleClass('selected',flg);
64
+
65
+ });
66
+
67
+ }).change();
68
+
69
+ });
70
+
71
+
72
+
73
+ ```
74
+
75
+ ついでにHTMLもほぼ提示のままですが
76
+
77
+ ```HTML
78
+
79
+ <input type="checkbox" class="js-dow">月曜
80
+
81
+ <input type="checkbox" class="js-dow">火曜
82
+
83
+ <input type="checkbox" class="js-dow">水曜
84
+
85
+ <input type="checkbox" class="js-dow">木曜
86
+
87
+ <input type="checkbox" class="js-dow">金曜
88
+
89
+ <input type="checkbox" class="js-dow">土曜
90
+
91
+ <input type="checkbox" class="js-dow">日曜
92
+
93
+
94
+
95
+ <table id="t1">
96
+
97
+ <tr>
98
+
99
+ <th class="js-dow">mon</th>
100
+
101
+ <th class="js-dow">tue</th>
102
+
103
+ <th class="js-dow">wed</th>
104
+
105
+ <th class="js-dow">thu</th>
106
+
107
+ <th class="js-dow">fri</th>
108
+
109
+ <th class="js-dow">sat</th>
110
+
111
+ <th class="js-dow">sun</th>
112
+
113
+ </tr>
114
+
115
+ <tr>
116
+
117
+ <td>1</td>
118
+
119
+ <td>2</td>
120
+
121
+ <td>3</td>
122
+
123
+ <td>4</td>
124
+
125
+ <td>5</td>
126
+
127
+ <td>6</td>
128
+
129
+ <td>7</td>
130
+
131
+ </tr>
132
+
133
+ <tr>
134
+
135
+ <td>8</td>
136
+
137
+ <td>9</td>
138
+
139
+ <td>10</td>
140
+
141
+ <td>11</td>
142
+
143
+ <td>12</td>
144
+
145
+ <td>13</td>
146
+
147
+ <td>14</td>
148
+
149
+ </tr>
150
+
151
+ <tr>
152
+
153
+ <td>15</td>
154
+
155
+ <td>16</td>
156
+
157
+ <td>17</td>
158
+
159
+ <td>18</td>
160
+
161
+ <td>19</td>
162
+
163
+ <td>20</td>
164
+
165
+ <td>21</td>
166
+
167
+ </tr>
168
+
169
+ <tr>
170
+
171
+ <td>22</td>
172
+
173
+ <td>23</td>
174
+
175
+ <td>24</td>
176
+
177
+ <td>25</td>
178
+
179
+ <td>26</td>
180
+
181
+ <td>27</td>
182
+
183
+ <td>28</td>
184
+
185
+ </tr>
186
+
187
+ </table>
188
+
189
+ ```

1

th対応

2016/10/05 08:27

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  $(function() {
4
4
 
5
- $(".js-dow").on("change", function() {
5
+ $('.js-dow').on('change', function() {
6
6
 
7
7
  var flg=$(this).prop('checked');
8
8
 
9
- var dow=$(".js-dow").index(this);
9
+ var dow=$('.js-dow').index(this);
10
10
 
11
- $("#t1 tr").each(function() {
11
+ $('#t1 tr').each(function() {
12
12
 
13
- $(this).find('td').eq(dow).toggleClass('selected',flg);
13
+ $(this).find('td,th').eq(dow).toggleClass('selected',flg);
14
14
 
15
15
  });
16
16
 
@@ -25,3 +25,7 @@
25
25
 
26
26
 
27
27
  ※一応tableを確定させるためにtableにid="t1"を指定してください。
28
+
29
+ ※thも対象ですか?軽微な修正なのでソースを修正しときました
30
+
31
+ find('td')→find('td,th')