Pushing arrays based on each row inputs dynamically

Question

Based on my code I want to push each row\'s inputs to each array. If it is row1, it should push all the input values of row 1 to array a1. The second row\'s inputs

Answer 1

I think you mean this.

I tried to stay as close to your code as possible to not scare you off JavaScript

$('#check').click(function(event){
  event.preventdefault;
  var a=[];
  $("[id^=row]").each(function() { // for each row
    var idx = a.length; // find how many entries in a
    a[idx]=[]; // add a new array
    $(this).find("td input").each(function(i) { a[idx].push(this.value); }); // fill the array
  });  

  var output = ""; // initialise a string
  for (var i=0;i<a.length;i++) { // loop over a's items
    output += "a["+i+"]:"+a[i].join(","); // join each array with comma
    output += "<br/>";
  }  
  $('#output').html('<h4>Pushed arrays:</h4>'+output);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="row1">
        <td>1</td>
        <td><input  type="text" value="0" size="4"></td>
        <td><input  type="text" size="4"></td>
        <td><input  type="text" size="4"></td>
        <td><input  type="text" value="0" size="4"></td>
    </tr>
    <tr id="row2">
        <td>1</td>
        <td><input  type="text" size="4"></td>
        <td><input  type="text" value="1" size="4"></td>
        <td><input  type="text" value="0" size="4"></td>
        <td><input  type="text" size="4"></td>
    </tr>
</table>
<button id="check">Check Values</button>
<div id="output"></div>

Answer 2

I would do it like this :

$("#check").click(function() {
  // collect data
  var rows = $("tr").get().map(r => (
    $("input", r).get().map(i => i.value)
  ));
  // print data
  $("#output").html("<h4>Pushed arrays:</h4>" + rows.map((r, i) => (
    "a" + (i + 1) + ": [" + r.join(", ") + "]"
  )).join("<br>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="row1">
    <td>1</td>
    <td><input type="text" value="0" size="4"></td>
    <td><input type="text" size="4"></td>
    <td><input type="text" size="4"></td>
    <td><input type="text" value="0" size="4"></td>
  </tr>
  <tr id="row2">
    <td>2</td>
    <td><input type="text" size="4"></td>
    <td><input type="text" value="1" size="4"></td>
    <td><input type="text" value="0" size="4"></td>
    <td><input type="text" size="4"></td>
  </tr>
</table>
<button id="check">Check Values</button>
<div id="output"></div>

Hints to understand the above code

JQuery API and MDN doc :

• http://api.jquery.com/get/#get
• http://api.jquery.com/jQuery/#jQuery-selector-context
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Demo of join, map and arrow functions :

xs = ["A", "B", "C"]
// ["A", "B", "C"]
"[" + xs.join(", ") + "]"
// "[A, B, C]"
xs.map(function (x) { return parseInt(x, 16); })
// [10, 11, 12]
xs.map(x => parseInt(x, 16))
// [10, 11, 12]
xs.map((x, i) => x + i)
// ["A0", "B1", "C2"]
xxs = [["A", "B"], ["C", "D"]]
// [["A", "B"], ["C", "D"]]
xxs.map(xs => "[" + xs.join(", ") + "]")
// ["[A, B]", "[C, D]"]
xxs.map(xs => "[" + xs.join(", ") + "]").join("<br>")
// "[A, B]<br>[C, D]"

Answer 3

I'd use $.map to create a nested array. It seems as if you want to have a lot of rows. So, I would recommend a 2d array instead of individual variables to avoid repetitive code. With a 2d array you can loop through each row; with individual variables you'd have to manually rewrite the same code for each row.

$('#check').click(function(event){
  event.preventdefault;
  var serialize = [];
  $("#myTable tr").each(function () {
    serialize.push($.map($(this).find("input"), function (ele) {
      return ele.value;
    }));
  });
  console.log(serialize);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
          <td>1</td>
         <td><input  type="text" value="0" size="4"></td>
         <td><input  type="text" size="4"></td>
         <td><input  type="text" size="4"></td>
         <td><input  type="text" value="0" size="4"></td>
        </tr>
<tr>
          <td>1</td>
         <td><input  type="text" size="4"></td>
         <td><input  type="text" value="1" size="4"></td>
         <td><input  type="text" value="0" size="4"></td>
         <td><input  type="text" size="4"></td>
        </tr>
       </table>
<button id="check">Check Values</button>
<div id="output"></div>