从数独表格HTML表格生成数组ArrayList

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

这是我一般的小提琴设置：Sudoku Board Fiddle 的CSS从这个答案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来选择表。循环遍历每个表格行。嵌套一个循环来遍历每个输入并将每个值附加到数组。

这是我到目前为止（它根本不起作用，它只是记录一个空数组，即使我使用值填充表）。 var array = [];

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

Answer 1

你应该有另一个array每个tr和所有td迭代后，推动该阵列中主阵列

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>

Answer 2

有一对夫妇的问题与您的代码。首先，您试图找到ID为table的元素（这就是#table的目标）。您没有ID为table的元素，因此无法正常工作。所以你要么给你一个ID表，要么改变你的选择器来获取表。现在我会建议后者。

$('table')... 

其次，而不是使用.children()，请尝试使用$(selector, parent)速记。在桌子的情况下，.children()是尴尬的;它只选择直接的孩子，而TR不是直接的孩子（tbody是直接孩子，即使你没有在你的标记中声明它）。我避免使用.children()。如果有的话，使用.find()。

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

第三，您使用的是event.preventDefault（），但是您尚未将事件参数传递给您的回调函数。你需要传递的事件，像这样：

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

你仍然只能与一维数组，而不是一个2-d阵列就像你需要结束了，但是这个修复您有相关问题你的初始代码。

Answer 3

第一点是，您没有为表格元素添加id。但是你正在函数中引用table id，这就是它在小提琴代码中的样子。

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

我已经更新和代码而最终的结果是在控制台打印。

检查它。

Answer 4

var array = []; 
 

 
$('button').on('click', function(){ 
 
    event.preventDefault(); 
 
    array = []; 
 
    
 
    $('#table').find("tr").each(function(){ 
 
     var row = []; 
 
     $(this).find('input').each(function(){ 
 
      row.push($(this).val()); 
 
     }); 
 
     array.push(row); 
 
    }); 
 
    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>