gpt4 book ai didi

javascript - 在 JavaScript 中格式化使用数组生成的表

转载 作者:太空宇宙 更新时间:2023-11-03 20:25:12 24 4
gpt4 key购买 nike

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

我已经想出了如何使用两个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com