为什么总是只画第一张桌子?

考试:

1-创建一个包含3个表的HTML文件,每个表5x5,并在1 ... 50之间用10的倍数填充每一行。

2-创建一个PHP函数,该函数在范围之间进行抽奖,而无需重复。

3-更改等于抽奖编号的每个表数据的背景色,每行是一个数组位置。制作3张抽奖券。

我的HTML代码:

<head>
  <title>Loteria</title>
  <style>
    /* display centered tables */
    .tables {
      display: flex;
      justify-content: space-around;
    }

    /* space tables from each other */
    table {
      margin: 4em;
    }

    /* give border and spacing table datas and merge its borders */
    table td {
      border: 1px solid black;
      padding: 1em;
      border-collapse: collapse;
    }

    /* change td background color */
    .bg {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="tables">
    <!-- First Table -->
    <table id="table1">
      <tr class="row0">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row1">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row2">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row3">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row4">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
    </table>
    <!-- Second Table -->
    <table id="table2">
      <tr class="row0">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row1">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row2">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row3">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row4">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
    </table>
    <!-- Third Table -->
    <table id="table3">
      <tr class="row0">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row1">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row2">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row3">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr class="row4">
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
    </table>
  </div>
</body>
</html>

PHP代码:

      <?php
  function Lottery()
  {
    // declares a empty array
    $arr = [];

    // raffle a multiple of 10 number between 1...50
    while (true) {
      $num = mt_rand(1, 5) * 10;
      if (!in_array($num, $arr)) {
        array_push($arr, $num);
      }
      if (count($arr) > 4) break;
    }

    for ($i = 0; $i < count($arr); $i++) {
      array_fill_keys($arr, $i);
    }
    // sorts the array, but if it is a raffle, so why i would sort it? 
    // return the array
    //sort($arr);
    return $arr;
  }
  $sorteio1 = Lottery(); // first raffle
  $sorteio2 = Lottery(); // second raffle
  $sorteio3 = Lottery(); // third raffle
  ?>

JavaScript代码:

<!-- So, change background color or call php functions from html is kinda messy, so I used 
javascript to make thins easier -->
  <script>
    // receives the table number and raffle object
    function BluePaint(numTable, sorteio) {
      // selects the table with id od numTable
      if (document.querySelector("#table" + numTable)) {
        for (let [key, value] of Object.entries(sorteio)) {
          // selects its rows
          let row = document.querySelector(".row" + key);
          // select its cols
          let cells = row.getElementsByTagName("td");
          // change cols's class to bg 
          for (let i = 0; i < 5; i++) {
            if (cells[i].innerText == value) {
              cells[i].className = "bg";
              break;
            }
          }
        }
      }
    }

    // receives arrays from php
    let sorteio1 = <?php echo '["' . implode('", "', $sorteio1) . '"]' ?>;
    let sorteio2 = <?php echo '["' . implode('", "', $sorteio2) . '"]' ?>;
    let sorteio3 = <?php echo '["' . implode('", "', $sorteio3) . '"]' ?>;

    // call funcions
    //BluePaint(1, sorteio1);
    //BluePaint(2, sorteio2);
    BluePaint(3, sorteio3);
  </script>

但是,即使我显式设置了表编号,也总是总是只绘制第一个表。有更好的方法可以做到这一点,还是我只是在尝试做不可能的事情?

我试图将行号设置为0 ... 14,例如表1(行0 ... 4),表2(行5 ... 9)和表3(行11 ... 14),但没有成功太。

评论
  • 誓言~
    誓言~ 回复

    You break for loop after first execution.

          for (let i = 0; i < 5; i++) {
            if (cells[i].innerText == value) {
              cells[i].className = "bg";
              break;
            }
          }
    

    改成:

          for (let i = 0; i < 5; i++) {
            if (cells[i].innerText == value) {
              cells[i].className = "bg";
            }
          }