Question

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

这主要是为了我的代码的性能优化，因为我的实际代码行是20+，我试图像下面这样做，但没有成功。

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

＆＃13;

$('#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+']');
});

＆＃13;

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

＆＃13;

Answer 1

我使用$.map来创建嵌套数组。看起来好像你想拥有很多行。所以，我建议使用2d数组而不是单个变量来避免重复代码。使用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>

Answer 2

我会这样做：

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

演示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 3

我认为你的意思是这个。

我尽量保持尽可能接近您的代码，以免吓跑您的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>

基于每行动态推送数组

3 个答案:

了解上述代码的提示