Создать массив чисел из таблицы sudoku HTML-таблица

Question

У меня есть простая настройка таблицы 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]] 

Вот скрипка моего вообще установить: 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 целей). У вас нет элемента с идентификатором table, поэтому он не работает. Таким образом, вам нужно либо предоставить вам таблицу ID, либо изменить селектор, чтобы получить таблицу. На данный момент я предлагаю последнее.

$('table')... 

Во-вторых, вместо того, чтобы использовать .children(), попробуйте использовать $(selector, parent) стенографии. .children() неудобно в случае таблиц; он выбирает только прямых детей, а TR не является прямым ребенком (tbody - это прямой ребенок, даже если вы не объявляете его в своей разметке). Я избегаю использования .children(). Если что-нибудь, используйте .find().

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

В-третьих, вы используете event.preventDefault(), но вы не прошли события для параметра Я обратного вызова. Вам необходимо пройти событие, например, так:

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

Вы еще только в конечный итоге с 1-мерным массивом, а не 2-D массива, как вы бы требовать, но это устраняет проблемы, которые вы имели с ваш начальный код.

Answer 3

Первое, что вы не добавили 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>