2

I have a simple HTML table setup to look like a sudoku board. Each cell is a input with type = number.

I want to use jQuery to extract all of the numbers from each cell and generate an array of arrays. The array will be formatted like this:

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

Here is a fiddle of my general set up: Sudoku Board Fiddle the css is taken from this answer sudoku css

Essentially the HTML is set up like this:

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

I want to make a function with jQuery that on the click of a button, it converts each row into an array and puts each array into one array.

My approach: Use jQuery to select the table. Loop through each table row. Nest a loop to loop over each input and append each value to arrays.

This is what I have so far (it does not work at all. It just logs an empty array, even if I populate the table with values). var array = [];

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

4 Answers 4

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Just tested this out and it works perfectly, thank you
1

There are a couple of problems with your code. First, you're trying to find an element with the ID table (that's what #table targets). You don't have an element with the ID of table, so that instantly doesn't work. So you either need to give you table an ID, or change your selector to get the table. I'll suggest the latter, for now.

$('table')...

Secondly, instead of using .children(), try using the $(selector, parent) shorthand. .children() is awkward in the case of tables; it only selects direct children, and a TR is not a direct child (tbody is the direct child, even if you don't declare it in your markup). I avoid using .children(). If anything, use .find().

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

Thirdly, you are using event.preventDefault(), but you haven't passed the event paramter to your callback. You need to pass the event, like so:

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

You will still only end up with a 1-dimensional array, not a 2-d array like you'd require, but this fixes the problems you had with your initial code.

Improve this answer

1 Comment

@jmancherje Glad it helped mate. I haven't added the 2-dimensional array code as the other answer already covers it (I think).
0

First point is, you haven't added id for table element. But you are taking reference of table id in function.That is how it was in fiddle code.

JS Code:

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

I have updated and code and the final result is printing in console.

Check it.

Improve this answer

Comments

0 

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.