JS 实现九九乘法表进阶版今天试了写一下九九乘法表，看看自己是否还能通畅的写出来。闲来无事就做了个进阶版，将正方的与反

今天试了写一下九九乘法表，看看自己是否还能通畅的写出来。

闲来无事就做了个进阶版，将正方的与反方的拼合在一起，行程如下图所示：

九九乘法表进阶版

具体代码如下：

<!--
 * @Author: under_forest
 * @Date: 2022-04-25 14:58:28
 * @Description: 九九乘法表进阶版
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table,
      tr,
      td {
        border: 1px solid;
      }

      table {
        width: 800px;
        height: 800px;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
  <script>
    var tr_length = document.getElementsByTagName("tr").length;

    for (i = 0; i <= tr_length; i++) {
      for (n = tr_length - 1; n >= i; n--) {
        document.getElementsByTagName("tr")[i].cells[n].innerText = tr_length - i + "X" + (tr_length - n);
        document.getElementsByTagName("tr")[i].cells[n].style.backgroundColor = "rgb(19, 221, 50)";
        document.getElementsByTagName("tr")[i].cells[n].style.textAlign = "center";
      }
    }
    for (i = tr_length; i > 0; i--) {
      for (n = i; n > 0; n--) {
        document.getElementsByTagName("tr")[i - 1].cells[n - 1].innerText =
          tr_length - i + 1 + "X" + (tr_length - n + 1);
        document.getElementsByTagName("tr")[i - 1].cells[n - 1].style.backgroundColor = "skyblue";
        document.getElementsByTagName("tr")[i - 1].cells[n - 1].style.textAlign = "center";
      }
    }
    for (i = 0; i < tr_length; i++) {
      document.getElementsByTagName("tr")[i].cells[i].style.backgroundColor = "rgb(242, 242, 28)";
    }
  </script>
</html>