血液型組み合わせ表 2
第一回目、血液型組み合わせ表 1
anchoco-program.hatenablog.jp
にて挑戦してみたその続き…
すこしですが、進歩がみられました…!!
こんな感じでなりまして、
どうにか縦表示っぽいのを表示させることに成功(?)しました!笑
黄色い部分が縦表示のイメージです。
訳あってというか、うまく指示できなかったため、
「O」二つに色付けされているのがかなり気になりますが、
これから修正していきます!
もっとも苦労したところは、
縦を表すところ。
次に、その縦表示のみに色を付けること。
かなり悩んでしまいました(苦笑
あと言えることは、
本当なら、黄色い縦部分が左側にきてくれるとありがたいな、と。笑
その方法もあるんだろうな~
後日調べてみます。
ちなみに未完成のカオス過ぎるコードはこちらです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table { border-collapse: collapse; } td { widows: 50px; height: 50px; border: solid 1px; text-align: center; } </style> <title>二重ループであそんでみる</title> </head> <body> <table id="blood_t_table"> <caption>血液型組み合わせ表</caption> </table> <script> var me = ["A", "B", "AB", "O"]; var A = ["A,O", "all", "A,B,AB", "A,O", "A"] var B = ["all", "B,O", "A,B,AB", "B,O", "B"] var AB = ["A,B,AB", "A,B,AB", "A,B,AB", "A,B", "AB"] var O = ["A,O", "B,O", "A,B", "O", "O"] //var you = ["A", "B", "AB", "O"]; var bTable = document.getElementById("blood_t_table"); var yoko = bTable.insertRow(-1); for (var i = 0; i < 4; i++) { var cell = yoko.insertCell(-1); cell.textContent = me[i]; cell.style.backgroundColor = "green"; } var yoko1 = bTable.insertRow(-1); for (var i = 0; i < 5; i++) { var cell = yoko1.insertCell(-1); cell.textContent = A[i]; if (A[i] == "A") { cell.style.backgroundColor = "yellow"; } } var yoko2 = bTable.insertRow(-1); for (var i = 0; i < 5; i++) { var cell = yoko2.insertCell(-1); cell.textContent = B[i]; if (B[i] == "B") { cell.style.backgroundColor = "yellow"; } } var yoko3 = bTable.insertRow(-1); for (var i = 0; i < 5; i++) { var cell = yoko3.insertCell(-1); cell.textContent = AB[i]; if (AB[i] == "AB") { cell.style.backgroundColor = "yellow"; } } var yoko4 = bTable.insertRow(-1); for (var i = 0; i < 5; i++) { var cell = yoko4.insertCell(-1); cell.textContent = O[i]; if (O[i] == "O") { cell.style.backgroundColor = "yellow"; } } </script> </body> </html>
こんな感じ。
いろいろ考えて疲れたので、
キンモクセイの香りに包まれて帰ろう。笑