如何将值从 javascript 变量输出到 html td 单元格中?

Question

>我有这个函数，可以生成一个表格，用户可以在其中输入0-9的数字。

function table(){
let strHTML = "";    
strHTML = "<table>";
for(let row = 0; row< 9; row++){
strHTML += "<tr>";
for (let col = 0; col < 9; col++){
strHTML += `<td><input id=${row}-${col} type="number" min="0" max="9" /></td>`;
}
strHTML += "</tr>";
}
strHTML += "</table>";
document.getElementById('myTable').innerHTML = strHTML;
};

我有一个函数可以将 HTML 表中的值保存在 javascript 数组中。

function saveTable(){
for(let col = 0; col < 9; col++){
for(let row = 0; row < 9; row++){
sudokuArr[col][row] = Number(document.getElementById(col+"-"+row).value); 
}
}
};

最后，我有这个函数，它将两个数字相加并将其显示在不同的单元格中。 但是，每当调用此函数时，都不会输出任何内容。不知道我做错了什么？

function calculate(){
var x = sudokuArr[0][0];
var y = sudokuArr[0][8];
var k = x + y;
document.getElementById("0-1").innerHTML = k;
};

Answer 1

元素的id不能以数字开头，因为它不会被识别。看看我下面的例子：它抛出一个以数字开头的id错误。

。为了兼容，ID 应以字母开头。

资料来源：https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

document.querySelector('#c123').innerHTML = 'starts with a letter';
document.querySelector('#123c').innerHTML = 'starts with a number';

<div id="123c"></div>
<div id="c123"></div>

Answer 2

我已经对您的代码进行了一些更正，您应该在路上。

var pref = 'X';
function table(){
let strHTML = "";
strHTML = "<table>";
for(let row = 0; row< 9; row++){
strHTML += "<tr>";
for (let col = 0; col < 9; col++){
strHTML += `<td><input id=${pref}${row}-${col} type="number" min="0" max="9" /></td>`;
}
strHTML += "</tr>";
}
strHTML += "</table>";
document.getElementById('myTable').innerHTML = strHTML;
};
table();
var sudokuArr = [];
function saveTable(){
for(let col = 0; col < 9; col++){
typeof sudokuArr[col] == 'undefined' && (sudokuArr[col] = []);
for(let row = 0; row < 9; row++){
sudokuArr[col][row] = Number(document.getElementById(pref + col+"-"+row).value);
}
}
};
saveTable();
function calculate(){
var x = sudokuArr[0][0];
var y = sudokuArr[0][8];
var k = x + y;
var el = document.getElementById(pref + "0-1");
el.value = k;
};
calculate();

<table id="myTable"></table>

Answer 3

扩展乔桑的答案。由于您要设置input字段的值，因此请使用document.getElementById("...").value。请参阅下面的代码片段以填充网格。

另外，我会将 id 括在引号中以使事情更清晰。<td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>

function table(){
let strHTML = "";    
strHTML = "<table>";
for(let row = 0; row< 9; row++){
strHTML += "<tr>";
for (let col = 0; col < 9; col++){
strHTML += `<td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>`;
}
strHTML += "</tr>";
}
strHTML += "</table>";
document.getElementById('myTable').innerHTML = strHTML;
};
function fill(){
var count = 1;
for(let col = 0; col < 9; col++){
for(let row = 0; row < 9; row++){
document.getElementById(`cell${row}-${col}`).value = count;
count++;
}
}
};
table();
fill();

<table id="myTable"></table>