回答編集履歴

2

追記2

2016/10/12 07:24

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -213,3 +213,211 @@
213
213
  </table>
214
214
 
215
215
  ```
216
+
217
+
218
+
219
+ # 追記2
220
+
221
+ ```javascript
222
+
223
+ $(function(){
224
+
225
+ $('#t1 tr').each(function(){
226
+
227
+ var td=$(this).find('td');
228
+
229
+ td.on('click',function(){
230
+
231
+ $(this).toggleClass('selected');
232
+
233
+ if($(this).not('.selected').length==1){
234
+
235
+ $('.js-dow').eq(td.index(this)).prop('checked',false);
236
+
237
+ $('#selectWeekdays').prop('checked',false);
238
+
239
+ }
240
+
241
+ });
242
+
243
+ });
244
+
245
+ $('.js-dow').on('change',function(){
246
+
247
+ var num=$('.js-dow').index(this);
248
+
249
+ var flg=$(this).prop('checked');
250
+
251
+ $('#t1 tr').each(function(){
252
+
253
+ $(this).find('td').eq(num).toggleClass('selected',flg);
254
+
255
+ });
256
+
257
+ });
258
+
259
+ $('#js-nh').on('change',function(){
260
+
261
+ var flg=$(this).prop('checked');
262
+
263
+ $('#t1 td.js-national-holiday').toggleClass('selected',flg);
264
+
265
+ }).change();
266
+
267
+ $('#selectHolidays').on('change',function(){
268
+
269
+ var flg=$(this).prop('checked');
270
+
271
+ $('#t1 td.js-national-holiday').toggleClass('selected',flg);
272
+
273
+ $('#t1 tr').each(function(){
274
+
275
+ $(this).find('td').slice(5,7).toggleClass('selected',flg);
276
+
277
+ });
278
+
279
+ $('.js-holiday').prop('checked',flg);
280
+
281
+ }).change();
282
+
283
+ $('#selectWeekdays').on('change',function(){
284
+
285
+ var flg=$(this).prop('checked');
286
+
287
+ $('#t1 tr').each(function(){
288
+
289
+ $(this).find('td').slice(0,5).not('.js-national-holiday').toggleClass('selected',flg);
290
+
291
+ });
292
+
293
+ $('.js-weekday').prop('checked',flg);
294
+
295
+ }).change();
296
+
297
+ });
298
+
299
+
300
+
301
+ ```
302
+
303
+ ```HTML
304
+
305
+ <input type="checkbox" class="js-dow js-weekday">月曜
306
+
307
+ <input type="checkbox" class="js-dow js-weekday">火曜
308
+
309
+ <input type="checkbox" class="js-dow js-weekday">水曜
310
+
311
+ <input type="checkbox" class="js-dow js-weekday">木曜
312
+
313
+ <input type="checkbox" class="js-dow js-weekday">金曜
314
+
315
+ <input type="checkbox" class="js-dow js-holiday">土曜
316
+
317
+ <input type="checkbox" class="js-dow js-holiday">日曜
318
+
319
+ <input type="checkbox" class="js-holiday" id="js-nh">祝日
320
+
321
+ <input type="checkbox" id="selectHolidays">土日祝日
322
+
323
+ <input type="checkbox" id="selectWeekdays">平日
324
+
325
+ <table id="t1">
326
+
327
+ <tr>
328
+
329
+ <th class="js-dow">mon</th>
330
+
331
+ <th class="js-dow">tue</th>
332
+
333
+ <th class="js-dow">wed</th>
334
+
335
+ <th class="js-dow">thu</th>
336
+
337
+ <th class="js-dow">fri</th>
338
+
339
+ <th class="js-dow">sat</th>
340
+
341
+ <th class="js-dow">sun</th>
342
+
343
+ </tr>
344
+
345
+ <tr>
346
+
347
+ <td class="js-national-holiday">1</td>
348
+
349
+ <td>2</td>
350
+
351
+ <td>3</td>
352
+
353
+ <td>4</td>
354
+
355
+ <td>5</td>
356
+
357
+ <td>6</td>
358
+
359
+ <td>7</td>
360
+
361
+ </tr>
362
+
363
+ <tr>
364
+
365
+ <td>8</td>
366
+
367
+ <td>9</td>
368
+
369
+ <td>10</td>
370
+
371
+ <td>11</td>
372
+
373
+ <td>12</td>
374
+
375
+ <td>13</td>
376
+
377
+ <td>14</td>
378
+
379
+ </tr>
380
+
381
+ <tr>
382
+
383
+ <td>15</td>
384
+
385
+ <td>16</td>
386
+
387
+ <td>17</td>
388
+
389
+ <td>18</td>
390
+
391
+ <td>19</td>
392
+
393
+ <td>20</td>
394
+
395
+ <td>21</td>
396
+
397
+ </tr>
398
+
399
+ <tr>
400
+
401
+ <td>22</td>
402
+
403
+ <td>23</td>
404
+
405
+ <td>24</td>
406
+
407
+ <td>25</td>
408
+
409
+ <td>26</td>
410
+
411
+ <td>27</td>
412
+
413
+ <td>28</td>
414
+
415
+ </tr>
416
+
417
+ </table>
418
+
419
+ ```
420
+
421
+
422
+
423
+

1

追記

2016/10/12 07:24

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -3,3 +3,213 @@
3
3
  祝日を自動計算することは理論的に不可能です。
4
4
 
5
5
  (祝日のロジックは定期的に変わるので)
6
+
7
+
8
+
9
+ # 追記
10
+
11
+ チェックボックスは条件が競合するのでボタンを使ったタイプを追記しておきます
12
+
13
+
14
+
15
+ ```javascript
16
+
17
+ $(function(){
18
+
19
+ var list={"mon":0,"tue":1,"wed":2,"thu":3,"fri":4,"sat":5,"sun":6};
20
+
21
+ $('#t1 td').on('click',function(){
22
+
23
+ $(this).toggleClass('selected');
24
+
25
+ });
26
+
27
+ $('.weekday').on('click',function(){
28
+
29
+ var name=$(this).prop('name');
30
+
31
+ var val=$(this).val();
32
+
33
+ $('#t1 tr').each(function(){
34
+
35
+ $(this).find('td').eq(list[name]).toggleClass('selected',val=='on');
36
+
37
+
38
+
39
+ });
40
+
41
+ });
42
+
43
+ $('.js-dow').on('click',function(){
44
+
45
+ var name=$(this).prop('name');
46
+
47
+ var val=$(this).val();
48
+
49
+ $('#t1 tr').each(function(){
50
+
51
+ $(this).find('td').eq(list[name]).toggleClass('selected',val=='on');
52
+
53
+
54
+
55
+ });
56
+
57
+ });
58
+
59
+ $('[name="js-nh"]').on('click',function(){
60
+
61
+ var val=$(this).val();
62
+
63
+ $('#t1 td.js-national-holiday').toggleClass('selected',val=='on');
64
+
65
+ });
66
+
67
+ $('[name="js-holidays"]').on('click',function(){
68
+
69
+ var val=$(this).val();
70
+
71
+ $('#t1 td.js-national-holiday').toggleClass('selected',val=='on');
72
+
73
+ $('#t1 tr').each(function(){
74
+
75
+ $($(this).find('td').slice(5,7)).toggleClass('selected',val=='on');
76
+
77
+ });
78
+
79
+ });
80
+
81
+ $('[name="js-weekdays"]').on('click',function(){
82
+
83
+ var val=$(this).val();
84
+
85
+ $('#t1 tr').each(function(){
86
+
87
+ $(this).find('td').slice(0,5).not('.js-national-holiday').toggleClass('selected',val=='on');
88
+
89
+ });
90
+
91
+ });
92
+
93
+ });
94
+
95
+ ```
96
+
97
+
98
+
99
+ ```HTML
100
+
101
+ 月曜<input type="button" class="js-dow" name="mon" value="on">/<input type="button" class="js-dow" name="mon" value="off">
102
+
103
+ 火曜<input type="button" class="js-dow" name="tue" value="on">/<input type="button" class="js-dow" name="tue" value="off">
104
+
105
+ 水曜<input type="button" class="js-dow" name="wed" value="on">/<input type="button" class="js-dow" name="wed" value="off">
106
+
107
+ 木曜<input type="button" class="js-dow" name="thu" value="on">/<input type="button" class="js-dow" name="thu" value="off">
108
+
109
+ 金曜<input type="button" class="js-dow" name="fri" value="on">/<input type="button" class="js-dow" name="fri" value="off">
110
+
111
+ 土曜<input type="button" class="js-dow" name="sat" value="on">/<input type="button" class="js-dow" name="sat" value="off">
112
+
113
+ 日曜<input type="button" class="js-dow" name="sun" value="on">/<input type="button" class="js-dow" name="sun" value="off">
114
+
115
+ 祝日<input type="button" name="js-nh" value="on">/<input type="button" name="js-nh" value="off">
116
+
117
+ 土日祝日<input type="button" name="js-holidays" value="on">/<input type="button" name="js-holidays" value="off">
118
+
119
+ 平日<input type="button" name="js-weekdays" value="on">/<input type="button" name="js-weekdays" value="off">
120
+
121
+ <table id="t1">
122
+
123
+ <tr>
124
+
125
+ <th class="js-dow">mon</th>
126
+
127
+ <th class="js-dow">tue</th>
128
+
129
+ <th class="js-dow">wed</th>
130
+
131
+ <th class="js-dow">thu</th>
132
+
133
+ <th class="js-dow">fri</th>
134
+
135
+ <th class="js-dow">sat</th>
136
+
137
+ <th class="js-dow">sun</th>
138
+
139
+ </tr>
140
+
141
+ <tr>
142
+
143
+ <td class="js-national-holiday">1</td>
144
+
145
+ <td>2</td>
146
+
147
+ <td>3</td>
148
+
149
+ <td>4</td>
150
+
151
+ <td>5</td>
152
+
153
+ <td>6</td>
154
+
155
+ <td>7</td>
156
+
157
+ </tr>
158
+
159
+ <tr>
160
+
161
+ <td>8</td>
162
+
163
+ <td>9</td>
164
+
165
+ <td>10</td>
166
+
167
+ <td>11</td>
168
+
169
+ <td>12</td>
170
+
171
+ <td>13</td>
172
+
173
+ <td>14</td>
174
+
175
+ </tr>
176
+
177
+ <tr>
178
+
179
+ <td>15</td>
180
+
181
+ <td>16</td>
182
+
183
+ <td>17</td>
184
+
185
+ <td>18</td>
186
+
187
+ <td>19</td>
188
+
189
+ <td>20</td>
190
+
191
+ <td>21</td>
192
+
193
+ </tr>
194
+
195
+ <tr>
196
+
197
+ <td>22</td>
198
+
199
+ <td>23</td>
200
+
201
+ <td>24</td>
202
+
203
+ <td>25</td>
204
+
205
+ <td>26</td>
206
+
207
+ <td>27</td>
208
+
209
+ <td>28</td>
210
+
211
+ </tr>
212
+
213
+ </table>
214
+
215
+ ```