通过几本书逐渐自学 JS，现在在 Arrays。如果这个问题不符合标准请忽略，我会删除。 我确信当用户输入数组的元素时，可以同时将数组的元素输出到 HTML 表，但我已经没有想法了，并且已经在这个网站上搜索了很多答案。我现在有一个 3x3 HTML 表，一个 2d 数组(“数组的数组”)。想要提示用户输入一个正整数并将其加载到每个对应的cell()位置。最终我会编写代码来测试行、列和对 Angular 线的总和是否相同。寻找一些我需要修改当前代码/函数的指针。这是我到目前为止所拥有的。感谢评论。
<html>
<head>
<script type="text/javascript">
function simpleTable() {
//create array of 3 rows 3 columns
var myArray = new Array(3);
for(var i = 0; i < 3; i++)
{
myArray[i] = new Array(3);
}
for(var i = 0; i < 3; i++) //prompt user for input and fill the array
{
for(var j = 0; j < 3; j++)
{
myArray[i][j]= prompt("Enter a number for row " + (i + 1) +
", column " + (j + 1) + ":");
//need to output user input immediately to a cell in HTML
table here.
}
}
}
//add another function here to test the rows, cols diagonals if sums
are equal
function areEqual() {
//expand after solving the issue with seeing user input data
}
</script>
</head>
<body>
<div id="button1">
<button type="button" id="nums" onClick="simpleTable()">Enter
positive numbers</button>
</div>
<table width="100%" border="1">
<tr>
<td height="50"><span id="c01" /span></td>
<td><span id="c02" /span></td>
<td><span id="c03" /span></td>
</tr>
<tr>
<td height="50"><span id="c1l" /span></td>
<td><span id="c12" /span></td>
<td><span id="c13" /span></td>
</tr>
<tr>
<td height="50"><span id="c21" /span></td>
<td><span id="c22" /span></td>
<td><span id="c23" /span></td>
</tr>
</table>
</body>
</html>
最佳答案
您发布的代码似乎在顶部缺少一些位，使其成为示例代码的实际工作位。除此之外:我建议让 javascript 生成该表，而不是手动编码。
// turn a [[1,2,...],[3,4,...],[],...] into a
// <table><tr><td>1</td><td>2</td>...</tr><tr>...</tr>...</table>
function makeTable(arrayOfArrays) {
var table = document.createElement("table");
var rows = formRows(arrayOfArrays);
rows.forEach(function(row) {
table.appendChild(row);
});
return table;
}
// turn a [1,2,...] into <tr><td>1</td><td>2</td>...</tr>
function formRows(arrayOfArrays) {
return arrayOfArrays.map(function(individualArray, rowId) {
var row = document.createElement("tr");
individualArray.forEach(function(cellValue, cellId) {
var col = document.createElement("td");
col.textContent = cellValue;
col.id = "cell-" + rowId + "-" + cellId;
row.appendChild(col);
});
return row;
});
}
然后将其插入占位符元素中，例如:
<!doctype html>
<html>
<body>
<div id="tabletarget"></div>
<script> /* all your JS including the above code */</script>
<script>
var target = document.getElementById("tabletarget");
target.appendChild(makeTable(yourArrayOfArraysHere));
</script>
<body>
</html>
这使您可以更好地控制更新表时的“做什么、如何做、在哪里”，因为您可以重新生成它，也可以向每个 <td> 添加事件监听器。您生成，因此您可以发送要处理的更新事件，而无需重新生成 HTML 等。
关于javascript - 当用户将数字输入 HTML 表时，我可以输出二维数组的元素吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29450537/