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