我将如何创建一个二维输入数组答案

【问题标题】：How would I go about creating a 2-Dimensional Array of Input我将如何创建一个二维输入数组
【发布时间】：2017-02-11 22:17:25
【问题描述】：

如果基于文本（数字）输入，我的目标是创建一个二维数组。我想使用与 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 循环中放入什么来获得列出的多维输入数组？ Here is an example 我想让它看起来像什么。用户将能够单击每个元素并能够输入一个数字。

【问题讨论】：

rows 和 cols 元素应该只有一个。您可以在问题中包含html 吗？
@guest271314 HTML 代码很多。您是否正在寻找特定的几行？另外，我不确定你的意思是每行和每列应该只有一个。
document 中元素的 id 应该是唯一的。 document 中的每个 #row 和 #col 元素最多应该有一个。你的意思是row.value 和col.value？
哦，在我的代码中，我有另一个输入栏，用户可以控制它是 <input type="number" id="rows"/>，如果这是你要的，还有 <input type="number" id="cols"/>。

标签： javascript html arrays multidimensional-array

【解决方案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>

【讨论】：

【解决方案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]
]

【讨论】：

document 中的rows 或cols 元素不应超过一个。
@guest271314 我不明白！如果它只有一行或一列，它如何是一个多维数组？
不确定，除了 OP，实际上是在尝试将这些元素的 rows 和 cols 设置为 .value，请参阅 @BulentVural 的回答。 id 的元素在 document 中应该是唯一的。 document.getElementById() 最多返回一个元素。