Question

我似乎无法弄清楚我应该在这里做什么。我已经创建了一个用于测试的代码块，该代码块根据一些随机数和用户的输入生成了一个表（稍后会出现，并且当前代码块中不存在此表）。生成随机数并将其存储在变量中，然后将其保存在二维数组中。

我已经弄清楚了如何使用两个for循环和文档编写来生成一个简单的表，但是我想用边框和一些内部填充来格式化最终结果。我不知道这样做。

代码：

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")

      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

我已经在Stack和其他几个站点上进行了研究，尽管所提供的信息似乎很有意义，但我并没有运气尝试将其中的代码集成到我的代码中。例如：document.CreateElement("table")，依此类推。看起来应该可行，但是到目前为止，我在Stack上的大多数问题都已成为趋势，我认为我可能很难理解它的工作原理。

tl; dr：我想帮助格式化用上述代码生成的表，特别是简单的边框和一些单元格内部填充。

谢谢。

Answer 1

将CSS添加到您的页面。

由于您要在main()中重写页面，因此还必须在CSS中添加document.write()。如果您学会了如何修改DOM，那就更好了。

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")

      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
      document.write(`<style>
  table, th, td {
 border: 1px solid black;
}
</style>`);
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

Answer 2

我更改了此代码，在您的桌子周围创建了黑色边框。 document.write("<table style='border: 1px solid black'>")

如果您想要更多，则可以对在tr或td元素中创建的每个块执行相同操作

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table style='border: 1px solid black'>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")
      //const tbody = document.getDocumentById("<tbody>")
      //tbody.setAttribute("style", "border: 1px solid blue;")
      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

格式化JavaScript中由数组生成的表

2 个答案: