Q&A
表にしたい、ということですが、何のライブラリを使ってどんな形の表にする予定なのかが記載されていないので、回答できません。もっと具体的に、どこまで実装してどこでつまづいているのか書いてください。
javascript配列を表にして色を付けたい
#表にしたデータ 形式
javascript
1Warehouse_Slot=[[[[1, 0, 0], [0, 0, 0], [0, 0, 0]], [[0, 0, 1], [0, 0, 0], [0, 0, 0]], [[0, 0, 0], [0, 0, 0], [0, 0, 1]], [[0, 0, 0], [0, 0, 0], [1, 0, 0]]], [[[2, 2, 0], [0, 0, 0], [0, 0, 0]], [[0, 0, 2], [0, 0, 2], [0, 0, 0]], [[0, 0, 0], [0, 0, 0], [0, 2, 2]]]] 2
出力イメージ ３行ずつ表にしたい。
[1, 0, 0] [0, 0, 0] [0, 0, 0] [0, 0, 1] [0, 0, 0] [0, 0, 0] [0, 0, 0] [0, 0, 0] [0, 0, 1] [0, 0, 0] [0, 0, 0] [1, 0, 0] [2, 2, 0] [0, 0, 0] [0, 0, 0] [0, 0, 2] [0, 0, 2] [0, 0, 0] [0, 0, 0] [0, 0, 0] [0, 2, 2]
数値の１がついてる所なら赤など、
数値の２がついてる所なら青などに変更したいです。
#現状のコード
html
1 2<table> 3<tr> <td>1</td> <td>0</td> <td>0</td> </tr> <br> 4<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 5<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 6</table> 7<table> 8<tr> <td>0</td> <td>0</td> <td>1</td> </tr> <br> 9<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 10<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 11</table> 12<table> 13<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 14<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 15<tr> <td>0</td> <td>0</td> <td>1</td> </tr> <br> 16</table> 17<table> 18<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 19<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 20<tr> <td>1</td> <td>0</td> <td>0</td> </tr> <br> 21</table> 22<table> 23<tr> <td>2</td> <td>2</td> <td>0</td> </tr> <br> 24<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 25<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 26</table> 27<table> 28<tr> <td>0</td> <td>0</td> <td>2</td> </tr> <br> 29<tr> <td>0</td> <td>0</td> <td>2</td> </tr> <br> 30<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 31</table> 32<table> 33<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 34<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 35<tr> <td>0</td> <td>2</td> <td>2</td> </tr> <br> 36</table> 37<table> 38<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 39<tr> <td>2</td> <td>0</td> <td>0</td> </tr> <br> 40<tr> <td>2</td> <td>0</td> <td>0</td> </tr> <br> 41</table> 42<table> 43<tr> <td>2</td> <td>0</td> <td>2</td> </tr> <br> 44<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 45<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 46</table> 47<table> 48<tr> <td>0</td> <td>0</td> <td>2</td> </tr> <br> 49<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 50<tr> <td>0</td> <td>0</td> <td>2</td> </tr> <br> 51</table> 52<table> 53<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 54<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 55<tr> <td>2</td> <td>0</td> <td>2</td> </tr> <br> 56</table> 57<table> 58<tr> <td>2</td> <td>0</td> <td>0</td> </tr> <br> 59<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 60<tr> <td>2</td> <td>0</td> <td>0</td> </tr> <br> 61</table> 62<table> 63<tr> <td>2</td> <td>0</td> <td>0</td> </tr> <br> 64<tr> <td>0</td> <td>2</td> <td>0</td> </tr> <br> 65<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 66</table> 67<table> 68<tr> <td>0</td> <td>0</td> <td>2</td> </tr> <br> 69<tr> <td>0</td> <td>2</td> <td>0</td> </tr> <br> 70<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 71</table> 72<table> 73<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 74<tr> <td>0</td> <td>2</td> <td>0</td> </tr> <br> 75<tr> <td>0</td> <td>0</td> <td>2</td> </tr> <br> 76</table> 77<table> 78<tr> <td>0</td> <td>0</td> <td>0</td> </tr> <br> 79<tr> <td>0</td> <td>2</td> <td>0</td> </tr> <br> 80<tr> <td>2</td> <td>0</td> <td>0</td> </tr> <br> 81</table> 82
javascriptの操作方法が分からない為、取り敢えず
ベタ打ちです。
回答1件
0
ベストアンサー
テーブルに落とし込むところはできているのでしょうか？
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 [].forEach.call(document.querySelectorAll('td'),function(x){ 3 if(x.textContent=="1") x.style.color="red"; 4 if(x.textContent=="2") x.style.color="blue"; 5 }); 6});
HTML
1<table> 2<tr> 3<td>1</td> 4<td>0</td> 5<td>0</td> 6</tr> 7<br> 8<tr> 9<td>0</td> 10<td>0</td> 11<td>0</td> 12</tr> 13<br> 14<tr> 15<td>0</td> 16<td>0</td> 17<td>0</td> 18</tr> 19<br> 20</table> 21<table> 22<tr> 23<td>0</td> 24<td>0</td> 25<td>1</td> 26</tr> 27<br> 28<tr> 29<td>0</td> 30<td>0</td> 31<td>0</td> 32</tr> 33<br> 34<tr> 35<td>0</td> 36<td>0</td> 37<td>0</td> 38</tr> 39<br> 40</table> 41<table> 42<tr> 43<td>0</td> 44<td>0</td> 45<td>0</td> 46</tr> 47<br> 48<tr> 49<td>0</td> 50<td>0</td> 51<td>0</td> 52</tr> 53<br> 54<tr> 55<td>0</td> 56<td>0</td> 57<td>1</td> 58</tr> 59<br> 60</table> 61<table> 62<tr> 63<td>0</td> 64<td>0</td> 65<td>0</td> 66</tr> 67<br> 68<tr> 69<td>0</td> 70<td>0</td> 71<td>0</td> 72</tr> 73<br> 74<tr> 75<td>1</td> 76<td>0</td> 77<td>0</td> 78</tr> 79<br> 80</table> 81<table> 82<tr> 83<td>2</td> 84<td>2</td> 85<td>0</td> 86</tr> 87<br> 88<tr> 89<td>0</td> 90<td>0</td> 91<td>0</td> 92</tr> 93<br> 94<tr> 95<td>0</td> 96<td>0</td> 97<td>0</td> 98</tr> 99<br> 100</table> 101<table> 102<tr> 103<td>0</td> 104<td>0</td> 105<td>2</td> 106</tr> 107<br> 108<tr> 109<td>0</td> 110<td>0</td> 111<td>2</td> 112</tr> 113<br> 114<tr> 115<td>0</td> 116<td>0</td> 117<td>0</td> 118</tr> 119<br> 120</table> 121<table> 122<tr> 123<td>0</td> 124<td>0</td> 125<td>0</td> 126</tr> 127<br> 128<tr> 129<td>0</td> 130<td>0</td> 131<td>0</td> 132</tr> 133<br> 134<tr> 135<td>0</td> 136<td>2</td> 137<td>2</td> 138</tr> 139<br> 140</table>
投稿2018/06/28 11:24
総合スコア114843
cssファイル
table {
border-collapse: collapse;
}
td {
border: solid 1px;
padding: 0.5em;
}
と言う風にしてます。
あなたの回答
tips
プレビュー
