Javascript 获取输入字段值并将其放入二维数组中

我试图获取输入字段值并将它们放入二维数组中。但问题是，我无法将这些值放入它们所需的位置。例如，获取n个输入值，然后将它们放入nXn数组

下面是html输入字段

 <table>
   <tr>
     <td><input type="number" id="0" name="R0C0" placeholder="R0C0" ></td>
     <td><input type="number"  id="1" name="R0C1" placeholder="R0C1" ></td>
     <td><input type="number"  id="2" name="R0C2" placeholder="R0C2" ></td>
     <td><input type="number"  id="3" name="R0C3" placeholder="R0C3" ></td>
     <td><input type="number"  id="4" name="R0C4" placeholder="R0C4" ></td>
     <td><input type="number"   id="5"name="R0C5" placeholder="R0C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="6" name="R1C0" placeholder="R1C0" ></td>
     <td><input type="number" id="7" name="R1C1" placeholder="R1C1" ></td>
     <td><input type="number" id="8" name="R1C2" placeholder="R1C2" ></td>
     <td><input type="number" id="9" name="R1C3" placeholder="R1C3" ></td>
     <td><input type="number" id="10" name="R1C4" placeholder="R1C4" ></td>
     <td><input type="number" id="11" name="R1C5" placeholder="R1C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="12" name="R2C0" placeholder="R2C0" ></td>
     <td><input type="number" id="13" name="R2C1" placeholder="R2C1" ></td>
     <td><input type="number" id="14" name="R2C2" placeholder="R2C2" ></td>
     <td><input type="number" id="15" name="R2C3" placeholder="R2C3" ></td>
     <td><input type="number" id="16" name="R2C4" placeholder="R2C4" ></td>
     <td><input type="number" id="17" name="R2C5" placeholder="R2C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="18" name="R3C0" placeholder="R3C0" ></td>
     <td><input type="number" id="19" name="R3C1" placeholder="R3C1" ></td>
     <td><input type="number" id="20" name="R3C2" placeholder="R3C2" ></td>
     <td><input type="number" id="21" name="R3C3" placeholder="R3C3" ></td>
     <td><input type="number"id="22"  name="R3C4" placeholder="R3C4" ></td>
     <td><input type="number" id="23" name="R3C5" placeholder="R3C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="24" name="R4C0" placeholder="R4C0" ></td>
     <td><input type="number" id="25" name="R4C1" placeholder="R4C1" ></td>
     <td><input type="number" id="26" name="R4C2" placeholder="R4C2" ></td>
     <td><input type="number" id="27"name="R4C3" placeholder="R4C3" ></td>
     <td><input type="number" id="28" name="R4C4" placeholder="R4C4" ></td>
     <td><input type="number" id="29" name="R4C5" placeholder="R4C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="30" name="R5C0" placeholder="R5C0" ></td>
     <td><input type="number" id="31" name="R5C1" placeholder="R5C1" ></td>
     <td><input type="number" id="32" name="R5C2" placeholder="R5C2" ></td>
     <td><input type="number" id="33" name="R5C3" placeholder="R5C3" ></td>
     <td><input type="number" id="34" name="R5C4" placeholder="R5C4" ></td>
     <td><input type="number" id="35" name="R5C5" placeholder="R5C5" ></td>
   </tr>
 </table>
<button onClick="checking()">check</button>

我预计产量为

1,2,3,4,5,6
2,3,4,5,5,6
1,2,3,4,5,6
3,5,4,2,2,2
4,5,3,4,3,2
4,3,2,3,5,3

然而，从上面的脚本中，我得到了有线结果。 像这样的

x[0][0] = 1,,,,, 
x[0][1] = ,,,,, 
x[0][2] = ,,,,, 
x[0][3] = ,,,,, 
x[0][4] = ,,,,, 
x[0][5] = ,,,,, 
x[1][0] = 1,1,1,1,1,1 
x[1][1] = 1,1,,,, 
x[1][2] = ,,,,, 
x[1][3] = ,,,,, 
x[1][4] = ,,,,, 
x[1][5] = ,,,,, 
x[2][0] = 1,1,1,1,1,1 
x[2][1] = 1,1,1,1,1,1
x[2][2] = 1,1,1,,, 
x[2][3] = ,,,,, 
x[2][4] = ,,,,, 
x[2][5] = ,,,,, 
x[3][0] = 1,1,1,1,1,1 
x[3][1] = 1,1,1,1,1,1 
x[3][2] = 1,1,1,1,1,1 
x[3][3] = 1,1,1,1,,
x[3][4] = ,,,,,
....................

---

如果您只是想记录数据，这就足够了：

检查=（）=>{
让res=Array.from（document.querySelectorAll（'input'））.reduce（（acc，input）=>{
//根据输入名称属性确定索引
让index=input.name.match（/R（[0-9]+）C（[0-9]+）/）；
//确保上面正则表达式的返回数组长度为3
如果（index.length==3）{
if（acc[索引[1]]==未定义）{
acc[索引[1]]={}；
}
acc[索引[1]][索引[2]]=输入值；
}
返回acc；
}, {});
控制台日志（res）；
}

检查

我建议使用表的自然结构来提供数组维度，这样，如果它们的代码与html不同步，就不会出现错误。也许是这样的：

const checking = () => {
    const result = [];
    const rows = Array.from(document.getElementsByTagName('tr'));

    rows.forEach(row => {
      var current = [];
      const inputs = Array.from(row.getElementsByTagName('input'));

      inputs.forEach((input) => {
        current.push(input.value);
      });
      result.push(current);
    });

    result.forEach(val => {
      console.log("[" + val.toString() + "]");
    });
  };

---

代码无法工作的原因是最外层的循环

for(var k = 0; k<35; k++){
  for(var i=0; i<x.length; i++){
    var xValues = x[i]; //x[i] reference the array object
    for(var j=0; j < xValues.length; j++){
      x[i][j] =document.getElementById(k).value;
    }
  }
}

for（var k=0；k{
var索引=外部索引*6+内部索引，
元素=document.getElementById（索引）；
返回元素.value；
});
});
控制台日志（“检查2”，x）；
}
var按钮=document.querySelector（“按钮”）；
按钮。addEventListener（“单击”，检查1）；
按钮。addEventListener（“单击”，检查2）

检查
避免编写繁琐的HTML——动态创建表和输入。生成HTML时，在创建输入时为其赋值。
Map（）
对象在项目的下一阶段将非常有用

DOM方法

-

-&

-

数据结构-阵列和


let数据=[
[1, 2, 3, 4, 5, 6],
[2, 3, 4, 5, 5, 6],
[1, 2, 3, 4, 5, 6],
[3, 5, 4, 2, 2, 2],
[4, 5, 3, 4, 3, 2],
[4, 3, 2, 3, 5, 3]
];
让矩阵=新映射（）；
函数setData（数据、矩阵、行=6、单元格=6）{
const form=document.forms[0]；
const seats=document.querySelector（'.seats'）；
for（设r=0；r

表格{
显示：内联表；
表布局：固定；
身高：80%
}
.音乐厅{
宽度：80%；
}
th{
宽度：5cm；
高度：1.2rem；
}
运输署{
文本对齐：居中；
高度：45px；
边框：1px实心#000；
}
.座位td：：之前{
内容：属性（类）'；
}
.座位{
显示：内联块；
宽度：4cm；
边框：1px纯绿色；
}
.rowIdx{
宽度：10px；
转换：转换（12px，0px）；
字号：900；
}
.rowIdx td{
边框颜色：透明；
}

座位矩阵
123456前级123456
甚至不用担心数组大小构造函数。只需初始化文本
[]
和
将值推入，或根据需要分配给索引。PS您应该描述您得到的结果。是否要根据2D数组为每个输入赋值？还是要从所有输入中提取值以创建二维数组？我假设是前者，因为HTML没有任何值。@zer00ne是的！我想按照2D数组进行分配。html输入与数组的数字大小完全相同。html值将通过填充输入字段来实现。第一个
是意外丢失的，还是与html中的相同？@3limin4t0r我没有找到，但问题出在js代码中。请参阅更新的示例代码，以反映我的编辑器中的内容。实际上，这适用于1D阵列场景，我认为它类似于使用推送。但在我的示例中并非如此。查看我的问题和更新的示例code@Kose，我已经更新了我的答案。项目放置现在基于输入的名称，我觉得这是最直观的：）
const checking = () => {
    const result = [];
    const rows = Array.from(document.getElementsByTagName('tr'));

    rows.forEach(row => {
      var current = [];
      const inputs = Array.from(row.getElementsByTagName('input'));

      inputs.forEach((input) => {
        current.push(input.value);
      });
      result.push(current);
    });

    result.forEach(val => {
      console.log("[" + val.toString() + "]");
    });
  };

for(var k = 0; k<35; k++){
  for(var i=0; i<x.length; i++){
    var xValues = x[i]; //x[i] reference the array object
    for(var j=0; j < xValues.length; j++){
      x[i][j] =document.getElementById(k).value;
    }
  }
}

for (let k = 0; k < 36; k++) {
  let i = Math.floor(k / 6),
      j = k % 6;

  x[i][j] = document.getElementById(k).value;
}

for (let i = 0; i < x.length; i++) {
  for(let j = 0; j < x[i].length; j++) {
    let k = i * 6 + j;

    x[i][j] = document.getElementById(k).value;
  }
}