我正在努力创建一个乘法表，该表显示表格单元格内的结果，并且每当您在提示对话框中键入新数字时，它都会生成一个新表格。到目前为止，我已经创建了第一行和第一个冒号。我尝试了不同的方法来进行乘法，但它对我不起作用。你能帮助我吗？ (这里有 HTML、CSS 和 JS 代码。)
jQuery(document).ready(function() {
while (true) {
var $Number = prompt("Choose a number to create the Multiplication Table:");
if ($Number === '' + parseInt($Number)) {
break;
} else {
alert("You didn't type a number! Please type a number!");
}
}
for (var a = 1; a < parseInt($Number) + 1; a++) {
var cell = $("<td>" + a + "</td>");
$("#row1").append(cell); //Krijon rreshtin e pare me numrat nga 1 deri ne $Number
var colon = $("<tr> <td>" + a + "</t> </tr>").attr("class", a);
$("table").append(colon); //Krijon kolonen e pare me numrat nga 1 deri ne $Number
}
})body {
max-width: 90%;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 1.5em;
}
table {
text-align: center;
margin-left: 2em;
margin-top: 1em;
}
td {
padding: 1em;
}<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1> Multiplication Table </h1>
<table border="1">
<tr id="row1">
<td>X</td>
</tr>
</table>
</body>
</html>最佳答案
你可以尝试这样的事情:
逻辑
表格分为3部分，
- 顶部面板:“X”后跟数字
- 左侧面板:仅数字
- body:乘法值。
function createBody(num) {
var _html = "";
for (var r = 0; r < num;) {
_html += "<tr>";
_html += "<td>" + ++r + "</td>";
for (var c = 1; c <= num; c++) {
_html += "<td>" + r * c + "</td>";
}
_html += "</tr>";
}
return _html;
}
function createHeader(num) {
var _html = "<tr>";
_html += "<td>X</td>";
for (var r = 1; r <= num; r++) {
_html += "<td>" + r + "</td>";
}
_html += "</tr>";
return _html
}
(function() {
var n = window.prompt("Enter a number");
var html = createHeader(n) + createBody(n);
document.getElementById("content").innerHTML = html
})()table {
text-align: center;
margin-left: 2em;
margin-top: 1em;
}
td {
padding: 1em;
border: 1px solid #ddd
}<table id="content"></table>注意:在循环中附加元素是一种不好的做法。您应该创建 html 字符串并执行批量操作。
关于javascript - 如何创建 JavaScript 乘法表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38916969/