基于每行输入动态推送数组

Question

根据我的代码，我想将每一行的输入推送到每个数组。如果是第 1 行，它应该将第 1 行的所有输入值推送到数组a1。第二行的输入应该被推送到数组a2 等等。

这主要是为了我的代码的性能优化，因为我的真实代码的行数是 20+，我正在尝试像下面这样但没有成功。

我希望能够知道每一行的数据（用于验证目的）

$('#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>

Answer 1

我会这样做：

$("#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>

理解上述代码的提示

JQuery API 和 MDN 文档：

• 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

join、map 和箭头函数的演示：

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 2

我想你是这个意思。

我尽量靠近你的代码，以免吓跑 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 3

我会使用$.map 创建一个嵌套数组。好像你想要有很多行。因此，我建议使用 2d 数组而不是单个变量，以避免重复代码。使用二维数组，您可以遍历每一行；对于单个变量，您必须为每一行手动重写相同的代码。

$('#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>