Pushing arrays based on each row inputs dynamically

问题

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 should be pushed to array a2 and so on.

This is mainly for performance optimization of my code since the rows of my real code are 20+ and I am trying to do it like below but without success.

I want to be able to know each row's data (for validation purpose)

$('#check').click(function(event){
event.preventdefault;
  var a1=[];var a2=[];
  $("[id^=row]").find("td input").each(function(i) { a[i].push(this.value); });
  $('#output').html('<h4>Pushed arrays:</h4>a1: ['+a1 +'] <br/> a2: ['+a2+']');
});

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

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

回答2:

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>

回答3:

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

来源：https://stackoverflow.com/questions/49206723/pushing-arrays-based-on-each-row-inputs-dynamically

标签

javascript

jquery

arrays

performance

optimization