Javascript 从数独表HTML表生成数字数组

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

我想使用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]]

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

以下是我的基本设置： css取自此答案

基本上，HTML是这样设置的：

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]]

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

对于每个

tr

应该有另一个

array

，在所有

td

迭代之后，将该数组推到主数组中

$（'button'）。在（'click'，function（）上{
event.preventDefault（）；
var数组=[]；
$（'#table'）。查找（'tr'）。每个（函数（）{
var-arr=[]；
$（this）.find（'input'）.each（function（）{
arr.push（$（this.val（））；
});
阵列推送（arr）；
});
console.log（数组）；
});
表格{
保证金：1em自动；
}
运输署{
高度：30px；
宽度：30px；
边框：1px实心；
文本对齐：居中；
}
td：第一个孩子{
左边框：实心；
}
td:n个孩子（3n）{
右边界：实心；
}
tr：第一个孩子{
边框顶部：实心；
}
tr:n第n个孩子（3n）td{
边框底部：实心；
}
输入{
宽度：30px；
高度：30px；
}
钮扣{
显示：块；
保证金：0自动；
高度：30px；
边界半径：5px；
}

生成数组
您的代码有几个问题。首先，您试图找到ID为
table
的元素（这就是
#table
的目标）。您没有ID为
table
的元素，因此该元素立即无法工作。因此，您需要为表提供一个ID，或者更改选择器以获取表。现在我建议后者

$('table')...

其次，不要使用
.children（）
，尝试使用
$（选择器，父项）
速记
.children（）
对于表来说很笨拙；它只选择直接子级，而TR不是直接子级（
tbody
是直接子级，即使您没有在标记中声明它）。我避免使用
.children（）
。如果需要，请使用
.find（）

第三，您正在使用event.preventDefault（），但尚未将事件参数传递给回调。您需要通过事件，如下所示：

$('tr', 'table').each(function(event) { ... });

您仍然只能得到一维数组，而不是需要的二维数组，但这解决了初始代码的问题。
第一点是，您没有为表元素添加id。但您在函数中引用了表id，这就是fiddle代码中的情况

JS代码：

 var array = [];

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

我已经更新和编码，最终结果是在控制台中打印

检查一下。

var数组=[]；
$（'button'）。在（'click'，function（）上{
event.preventDefault（）；
数组=[]；
$（'#table'）.find（“tr”）.each（function（）{
var行=[]；
$（this）.find（'input'）.each（function（）{
row.push（$（this.val（））；
});
array.push（行）；
});
console.log（数组）；
});
表格{
保证金：1em自动；
}
运输署{
高度：30px；
宽度：30px；
边框：1px实心；
文本对齐：居中；
}
td：第一个孩子{
左边框：实心；
}
td:n个孩子（3n）{
右边界：实心；
}
tr：第一个孩子{
边框顶部：实心；
}
tr:n第n个孩子（3n）td{
边框底部：实心；
}
输入{
宽度：30px；
高度：30px；
}
钮扣{
显示：块；
保证金：0自动；
高度：30px；
边界半径：5px；
}