javascript - 从数独表 HTML 表生成数字数组

Question

我有一个简单的 HTML 表格设置，看起来像一个数独板。每个单元格都是 type = number 的输入。

我想使用 jQuery 从每个单元格中提取所有数字并生成一个数组数组。该数组的格式如下:

array = [ [1,2,3,4,5,6,7,8,9],
          [2,3,4,5,6,7,8,9,1],
          [3,4,5,6,7,8,9,1,2],
          [1,2,3,4,5,6,7,8,9],
          [2,3,4,5,6,7,8,9,1],
          [3,4,5,6,7,8,9,1,2],
          [1,2,3,4,5,6,7,8,9],
          [2,3,4,5,6,7,8,9,1],
          [3,4,5,6,7,8,9,1,2]]

这是我的一般设置的 fiddle :Sudoku Board FiddleCSS 取自此答案 sudoku css

基本上 HTML 是这样设置的:

<table id='#table'>
  <tr id="row1">
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
  </tr>

  .... x9 rows

</form>

我想用 jQuery 创建一个函数，点击一个按钮，它将每一行转换成一个数组，并将每个数组放入一个数组中。

我的方法:使用 jQuery 选择表。遍历每个表行。嵌套循环以遍历每个输入并将每个值附加到数组。

这是我目前所拥有的(它根本不起作用。它只是记录一个空数组，即使我用值填充表也是如此)。 变量数组 = [];

$('button').on('click', function(){
    event.preventDefault();
    $('table').children('tr').each(function(){
        $(this).find('input').each(function(){
            array.push($(this).val());
        });
    });
    alert(array);
});

Answer 1

You should have another array for each tr and after all td iterations, push that array in main array

Fiddle here

$('button').on('click', function() {
  event.preventDefault();
  var array = [];
  $('#table').find('tr').each(function() {
    var arr = [];
    $(this).find('input').each(function() {
      arr.push($(this).val());
    });
    array.push(arr);
  });
  console.log(array);
});

table {
  margin: 1em auto;
}
td {
  height: 30px;
  width: 30px;
  border: 1px solid;
  text-align: center;
}
td:first-child {
  border-left: solid;
}
td:nth-child(3n) {
  border-right: solid;
}
tr:first-child {
  border-top: solid;
}
tr:nth-child(3n) td {
  border-bottom: solid;
}
input {
  width: 30px;
  height: 30px;
}
button {
  display: block;
  margin: 0 auto;
  height: 30px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table'>
  <tr id="row1">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row2">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row3">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row4">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row5">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row6">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row7">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row8">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
  <tr id="row9">
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
  </tr>
</table>

<button>Generate Array</button>