获取输入字段值并将其放入2D数组中

Question

我正在尝试获取输入字段值并将其放入二维数组中。但是问题是无法将值放到所需的位置。例如，获取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>

....，其中四行和id依次递增，直到36。

javascript代码：

const checking = () =>{
   //create a 2D array of 6 rows and 6 columns
  var x = new Array(6);
  for (var i = 0; i < x.length; i++) {
    x[i] = new Array(6);
  }

    //loop to get all input values ie from id=1 to id=36
    var k=0;
    for(k; k<35; k++){
      //loop for rows
      for(var i=0; i<x.length; i++){
        var xValues = x[i]; //x[i] reference the array object
        //loop for columns
         for(var j=0; j < xValues.length; j++){
          //put the input values to the 2D array respective position
           x[i][j] =document.getElementById(k).value;
          //console.log("x"+"["+i+"]"+"["+j+"]"+" = "+x[j]);
         }
      }
   }
 }//end function

对于应该输入的内容，

x = [
  [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]
];

我希望输出为

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] = ,,,,,
....................

Answer 1

您的代码不起作用的原因是最外部的循环。

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;
    }
  }
}

这将遍历所有行和单元格中的每个元素（36∙6∙6 = 1296次迭代）。您必须选择循环。您可以选择最外层或内层两个。

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;
  }
}

但不是两者都嵌套在一起。

我还添加了一个有效的示例。

function checking1() {
  var x = [];
  for (let index = 0; index < 36; index++) {
    // don't forget to change ^ from 35 to 36 or < to <=
    let innerIndex = index % 6,
        outerIndex = Math.floor(index / 6);
  
    if (!innerIndex) {
      x[outerIndex] = [];
    }
    
    let element = document.getElementById(index);
    x[outerIndex][innerIndex] = element.value;
  }
  
  console.log("checking1", x);
}

function checking2() {
  var x = new Array(6).fill().map((_, outerIndex) => {
    return new Array(6).fill().map((_, innerIndex) => {
      var index = outerIndex * 6 + innerIndex,
          element = document.getElementById(index);
      return element.value;
    });
  });
  
  console.log("checking2", x);
}

var button = document.querySelector("button");
button.addEventListener("click", checking1);
button.addEventListener("click", checking2);

<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>check</button>

Answer 2

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

checking = () => {
  let res = Array.from(document.querySelectorAll('input')).reduce((acc, input) => {
    // Determining the indexes based off of your input name attributes
    let indexes = input.name.match(/R([0-9]+)C([0-9]+)/);
    // Ensure that the returned array length of the regular expression above is 3
    if (indexes.length === 3) {
      if (acc[indexes[1]] === undefined) {
        acc[indexes[1]] = {};
      }
      acc[indexes[1]][indexes[2]] = input.value;
    }
    return acc;
  }, {});
  console.log(res);
}

<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>
</table>
<button onClick="checking()">check</button>

希望这会有所帮助，

Answer 3

我建议使用表的自然结构来提供数组维数，这样一来，即使它们的代码与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() + "]");
    });
  };

Answer 4

避免编写繁琐的HTML-动态创建表和输入。在生成HTML时，在创建输入时将其分配值。 Map()对象将在项目的下一阶段有用。

DOM方法
-HTMLFormElement
-.insertRow()和.insertCell()
-.insertAdjacentHTML()
数据结构-数组和Map

let data = [
  [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]
];

let matrix = new Map();

function setData(data, matrix, rows = 6, cells = 6) {
  const form = document.forms[0];
  const seats = document.querySelector('.seats');
  
  for (let r = 0; r < rows; r++) {
    const row = seats.insertRow();
    for (let c = 0; c < cells; c++) {
      const cel = row.insertCell();
      const input = `<input id="r${r}c${c}" name="r${r}c${c}" class="seat" type="number" min="0" max="6" value="0">`;
      cel.insertAdjacentHTML('beforeend', input);
      cel.className = `r${r}c${c}`;
      matrix.set(`r${r}c${c}`, data[r][c]);
      form[`r${r}c${c}`].value = data[r][c];
    }
  }
}

setData(data, matrix)

table {
  display: inline-table;
  table-layout: fixed;
  height: 80%
}

.concertHall {
  width: 80%;
}

th {
  width: 5ch;
  height: 1.2rem;
}

td {
  text-align: center;
  height: 45px;
  border: 1px solid #000;
}

.seats td::before {
  content: attr(class)' ';
}

.seat {
  display: inline-block;
  width: 4ch;
  border: 1px solid green;
}

.rowIdx {
  width: 10px;
  transform:translate(12px, 0px);
  font-weight: 900;
}

.rowIdx td {
  border-color: transparent;
}

<form id='seating'>
  <fieldset name='layout'>
    <legend>Seating Matrix</legend>
 <table class='rowIdx'><thead><tr><th>&nbsp;</th></tr><tr><th></th></tr></thead><tbody><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr></tbody></table><table class='concertHall'><thead class='colIdx'><tr><th colspan='6'>Front Stage</th></tr><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody class='seats'></tbody></table>
  </fieldset>
</form>