猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

血液型組み合わせ表 2

第一回目、血液型組み合わせ表 1
anchoco-program.hatenablog.jp

にて挑戦してみたその続き…


すこしですが、進歩がみられました…!!

f:id:msm20-chocolateee:20180920180649p:plain

こんな感じでなりまして、

どうにか縦表示っぽいのを表示させることに成功(?)しました!笑

黄色い部分が縦表示のイメージです。

訳あってというか、うまく指示できなかったため、
「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>

こんな感じ。


いろいろ考えて疲れたので、
キンモクセイの香りに包まれて帰ろう。笑