我似乎无法弄清楚我应该在这里做什么。我已经创建了一个用于测试的代码块，它根据一些随机数和用户输入生成一个表(这将在以后出现并且不存在于当前代码块中)。随机数生成并存储在变量中，然后保存在二维数组中。
我已经想出了如何使用两个 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:我想帮助格式化用上述代码生成的表格，特别是一个简单的边框和一些单元格内部填充。
提前致谢。
最佳答案
将 CSS 添加到您的页面。
由于您要在 main() 中重写页面，因此您还必须使用 document.write() 添加 CSS。如果你学会了如何修改 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>关于javascript - 在 JavaScript 中格式化使用数组生成的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57086752/