回答編集履歴

3

IE

2019/08/07 05:52

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -417,3 +417,39 @@
417
417
  という流れです
418
418
 
419
419
  これを1~12まで繰り返しています
420
+
421
+
422
+
423
+
424
+
425
+ # IE対応
426
+
427
+ IEで問題になる箇所は
428
+
429
+ - Arrayにfillする機能がない
430
+
431
+ - アロー関数がNG
432
+
433
+ - ヒアドキュメント非対応
434
+
435
+
436
+
437
+ ```javascript
438
+
439
+ $(function(){
440
+
441
+ [1,2,3,4,5,6,7,8,9,10,11,12].forEach(function(i){
442
+
443
+ if($('.m'+i+':gt(0)').filter(function(){return $(this).text()!==""}).length==0){
444
+
445
+ $('.m'+i+':eq(0)').text("");
446
+
447
+ $('.m'+i).addClass("test");
448
+
449
+ }
450
+
451
+ });
452
+
453
+ });
454
+
455
+ ```

2

解説

2019/08/07 05:51

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -351,3 +351,69 @@
351
351
  </table>
352
352
 
353
353
  ```
354
+
355
+
356
+
357
+ # js解説
358
+
359
+
360
+
361
+ m1~m12というクラスを処理するために1~12という文字が必要です
362
+
363
+ 「Array(12).fill(null).map((x,y)=>y+1)」が12個の要素を持った配列をつくり
364
+
365
+ そこ要素に1から順番に12まで割り振ってます、つまり
366
+
367
+ [1,2,3,4,5,6,7,8,9,10,11,12]という配列です。
368
+
369
+
370
+
371
+ 見やすくするとこういうこと。
372
+
373
+ ```javascript
374
+
375
+ [1,2,3,4,5,6,7,8,9,10,11,12].forEach(i=>{
376
+
377
+ if($(`.m${i}:gt(0)`).filter(function(){return $(this).text()!==""}).length==0){
378
+
379
+ $(`.m${i}:eq(0)`).text("");
380
+
381
+ $(`.m${i}`).addClass("test");
382
+
383
+ }
384
+
385
+ });
386
+
387
+ ```
388
+
389
+
390
+
391
+ 上記1~12の配列から一つずつ要素を取り出しiに入れてループしています
392
+
393
+ 仮にまずiが1だったとき
394
+
395
+
396
+
397
+ 「$(`.m${i}:gt(0)`)」は展開すると「$('.m1:gt(0)')」とうこと
398
+
399
+ つまりm1クラスで0番目の要素より大きい要素。
400
+
401
+ m1クラスがついたセルは5個あるので先頭を除く4個分の要素を指します。
402
+
403
+
404
+
405
+ それをfilterして中身(text)が空ではないものの数を数えます(length)
406
+
407
+ それが0個ということは先頭以外のすべてのセルが空ということ
408
+
409
+ その場合、
410
+
411
+ - $(`.m${i}:eq(0)`)=$('.m1:eq(0)')つまりm1クラスの先頭セルのテキストを""にする
412
+
413
+ - $(`.m${i}`)=$('.m1')つまりm1クラス全てにtestというクラスを付加する
414
+
415
+
416
+
417
+ という流れです
418
+
419
+ これを1~12まで繰り返しています

1

ちょうせい

2019/08/07 02:21

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -59,3 +59,295 @@
59
59
  </table>
60
60
 
61
61
  ```
62
+
63
+
64
+
65
+ # 調整版
66
+
67
+ ```javavascript
68
+
69
+ <style>
70
+
71
+ table{border-collapse:collapse;}
72
+
73
+ td{border:solid 1px;}
74
+
75
+ td.test{background-Color:yellow;}
76
+
77
+ td.test{border-left:solid 0;border-right:solid 0;width:0;padding:0;margin:0;background-Color:yellow;}
78
+
79
+ td.test+td{border-left:solid 0}
80
+
81
+ </style>
82
+
83
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
84
+
85
+ <script>
86
+
87
+ $(function(){
88
+
89
+ Array(12).fill(null).map((x,y)=>y+1).forEach(i=>{
90
+
91
+ if($(`.m${i}:gt(0)`).filter(function(){return $(this).text()!==""}).length==0){
92
+
93
+ $(`.m${i}:eq(0)`).text("");
94
+
95
+ $(`.m${i}`).addClass("test");
96
+
97
+ }
98
+
99
+
100
+
101
+ });
102
+
103
+ });
104
+
105
+ </script>
106
+
107
+ <table id="tbl">
108
+
109
+ <tbody>
110
+
111
+ <tr class="head">
112
+
113
+ <td rowspan="2">No</td>
114
+
115
+ <td rowspan="2">タイトル</td>
116
+
117
+ <td rowspan="2" class="detail">データ</td>
118
+
119
+ <td rowspan="2" class="date"></td>
120
+
121
+ <td rowspan="3">累計</td>
122
+
123
+ <td rowspan="3">統計</td>
124
+
125
+ <td colspan="14">18年度</td>
126
+
127
+ <td rowspan="3">18年度合計</td>
128
+
129
+
130
+
131
+ </tr>
132
+
133
+ <tr class="head">
134
+
135
+ <td colspan="6">18上期</td>
136
+
137
+ <td rowspan="2">18上期合計</td>
138
+
139
+ <td colspan="6">18下期</td>
140
+
141
+ <td rowspan="2">18下期合計</td>
142
+
143
+ </tr>
144
+
145
+ <tr class="head">
146
+
147
+ <td>No</td>
148
+
149
+ <td>品番</td>
150
+
151
+ <td class="detail">品名</td>
152
+
153
+ <td class="date">確認日</td>
154
+
155
+ <td class="m1">18/1</td>
156
+
157
+ <td class="m2">18/2</td>
158
+
159
+ <td class="m3">18/3</td>
160
+
161
+ <td class="m4">18/4</td>
162
+
163
+ <td class="m5">18/5</td>
164
+
165
+ <td class="m6">18/6</td>
166
+
167
+ <td class="m7">18/7</td>
168
+
169
+ <td class="m8">18/8</td>
170
+
171
+ <td class="m9">18/9</td>
172
+
173
+ <td class="m10">18/10</td>
174
+
175
+ <td class="m11">18/11</td>
176
+
177
+ <td class="m12">18/12</td>
178
+
179
+ </tr>
180
+
181
+ <tr>
182
+
183
+ <td rowspan="2">1</td>
184
+
185
+ <td rowspan="2">RNG001</td>
186
+
187
+ <td rowspan="2" class="detail">りんご</td>
188
+
189
+ <td class="date">2019年2月28日</td>
190
+
191
+ <td>3</td>
192
+
193
+ <td></td>
194
+
195
+ <td class="m1"></td>
196
+
197
+ <td class="m2"></td>
198
+
199
+ <td class="m3"></td>
200
+
201
+ <td class="m4"></td>
202
+
203
+ <td class="m5">40</td>
204
+
205
+ <td class="m6">13</td>
206
+
207
+ <td>13</td>
208
+
209
+ <td class="m7">5</td>
210
+
211
+ <td class="m8"></td>
212
+
213
+ <td class="m9"></td>
214
+
215
+ <td class="m10"></td>
216
+
217
+ <td class="m11"></td>
218
+
219
+ <td class="m12">627</td>
220
+
221
+ <td>627</td>
222
+
223
+ <td>640</td>
224
+
225
+
226
+
227
+ </tr>
228
+
229
+ <tr>
230
+
231
+ <td class="date">2019年3月29日</td>
232
+
233
+ <td>3</td>
234
+
235
+ <td></td>
236
+
237
+ <td class="m1"></td>
238
+
239
+ <td class="m2"></td>
240
+
241
+ <td class="m3"></td>
242
+
243
+ <td class="m4"></td>
244
+
245
+ <td class="m5">40</td>
246
+
247
+ <td class="m6">12</td>
248
+
249
+ <td>12</td>
250
+
251
+ <td class="m7">5</td>
252
+
253
+ <td class="m8"></td>
254
+
255
+ <td class="m9"></td>
256
+
257
+ <td class="m10"></td>
258
+
259
+ <td class="m11"></td>
260
+
261
+ <td class="m12">627</td>
262
+
263
+ <td>627</td>
264
+
265
+ <td>639</td>
266
+
267
+ </tr>
268
+
269
+ <tr>
270
+
271
+ <td colspan="3" rowspan="2"></td>
272
+
273
+ <td>2019年2月28日</td>
274
+
275
+ <td>42</td>
276
+
277
+ <td>10</td>
278
+
279
+ <td class="m1"></td>
280
+
281
+ <td class="m2"></td>
282
+
283
+ <td class="m3"></td>
284
+
285
+ <td class="m4"></td>
286
+
287
+ <td class="m5">40</td>
288
+
289
+ <td class="m6">18</td>
290
+
291
+ <td>18</td>
292
+
293
+ <td class="m7">5</td>
294
+
295
+ <td class="m8"></td>
296
+
297
+ <td class="m9"></td>
298
+
299
+ <td class="m10"></td>
300
+
301
+ <td class="m11"></td>
302
+
303
+ <td class="m12">627</td>
304
+
305
+ <td>627</td>
306
+
307
+ <td>645</td>
308
+
309
+ </tr>
310
+
311
+ <tr>
312
+
313
+ <td>2019年3月29日</td>
314
+
315
+ <td>42</td>
316
+
317
+ <td>10</td>
318
+
319
+ <td class="m1"></td>
320
+
321
+ <td class="m2"></td>
322
+
323
+ <td class="m3"></td>
324
+
325
+ <td class="m4"></td>
326
+
327
+ <td class="m5">40</td>
328
+
329
+ <td class="m6">17</td>
330
+
331
+ <td>17</td>
332
+
333
+ <td class="m7">5</td>
334
+
335
+ <td class="m8"></td>
336
+
337
+ <td class="m9"></td>
338
+
339
+ <td class="m10"></td>
340
+
341
+ <td class="m11"></td>
342
+
343
+ <td class="m12">627</td>
344
+
345
+ <td>627</td>
346
+
347
+ <td>644</td>
348
+
349
+ </tr>
350
+
351
+ </table>
352
+
353
+ ```