如何将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

扩展在JOSAN的答案。由于您正在设置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>