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

时间：2015-11-05 06:57:35

标签： javascript jquery html arrays function

我有一个简单的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);
});

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

您的代码存在一些问题。首先，您正在尝试查找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 :(得分：0)

首先，您还没有为表格元素添加ID。但是你在函数中引用了表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);
    });

我已更新并编写代码，最终结果是在控制台中打印。

检查一下。

答案 3 :(得分：0)

＆＃13;
＆＃13; 
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);
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题