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

时间:2017-07-19 23:27:52

标签: javascript html

我有这个函数生成一个表,用户可以输入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;
};

3 个答案:

答案 0 :(得分:3)

元素id不能以数字开头,因为它不会被识别。请看下面的示例:它会以id引发错误,该错误以数字开头。

  

... ID应以兼容字母开头。

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

&#13;
&#13;
document.querySelector('#c123').innerHTML = 'starts with a letter';
document.querySelector('#123c').innerHTML = 'starts with a number';
&#13;
<div id="123c"></div>
<div id="c123"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

    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>

答案 2 :(得分:1)

扩大Josan的答案。由于您要设置List<ScanResult> wifi_scan_list = wifi_manager.getScanResults(); 字段的值,请使用List<ScanResult> raw_wifi_scan_list = wifi_manager.getScanResults(); Set<ScanResult> unique_wifi_scan_set = new HashSet(raw_wifi_scan_list); List<ScanResult> wifi_scan_list = new Arraylist(unique_wifi_scan_set); 。请参阅下面的代码段以填充网格。

另外,我会将id包装在引号中以使事情更清晰。 input

document.getElementById("...").value
<td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>