我將如何創建輸入的二維數組

Question

我的目標是在基於文本（數字）輸入的情況下創建二維數組。 我想使用與HTML相同的輸入類型框，例如：

    <input type="text">

行和列的數量將基於HTML文檔中的另一個輸入。 這是我到目前為止的內容：

    var rows = document.getElementById("rows");
    var cols = document.getElementById("cols");

    for(var i = 0; i < rows; i++){
       for(var j = 0; j < cols; j++){ 
       //I don't know what to do here
       }
    }

我如何在嵌套的for循環中放置以獲得列出的多維輸入數組？ 這是我嘗試使事情看起來像的示例 。 用戶將能夠單擊每個元素並能夠輸入數字。

Answer 1

 function createTable() { var table = document.createElement('table'); var rows = +document.getElementById('rows').value; var cols = +document.getElementById('cols').value; for(var r=0; r<rows; r++) { var tr = document.createElement('tr'); table.appendChild(tr); for(var c=0; c<cols; c++) { var td = document.createElement('td'); tr.appendChild(td); var inp = document.createElement('input'); inp.setAttribute('type','text'); td.appendChild(inp); } } var container = document.getElementById('input_container'); container.innerHTML = ''; container.appendChild(table); } 

 td>input { width: 30px; height: 30px; padding: 5px; font-size: 20px; } 

 Rows : <input type="text" id="rows" value="3"> Cols : <input type="text" id="cols" value="8"> <button onclick="createTable();">Create</button> <div id="input_container"></div> 

Answer 2

var rows = document.getElementById("rows");
var cols = document.getElementById("cols");

var multi = [];                                      // the multidimensional array of inputs

for(var i = 0; i < rows; i++){
    var sub = [];                                    // create a new sub-array for each row
    for(var j = 0; j < cols; j++){                   // fill the sub array
        var input = document.createElement("INPUT"); // create an new input
        input.setAttribute("type", "text");
        sub.push(input);                             // push it into the sub array
    }
    multi.push(sub);                                 // push the sub array into the multi array
}

那么multi將是這樣的：

[
  [input, input, input, ..., input],
  [input, input, input, ..., input],
  ...
  [input, input, input, ..., input]
]