Javascript 为什么只使用循环中的最后一个对象创建数组？

我正在尝试创建一个由对象组成的数组。完成的最多，最后，数组具有相同数量的项，但它们都是我的最后一个循环对象。这似乎是某种参考。我真的不知道问题出在哪里

代码笔HTML：

<table class="table table-admin-panel table-bordered">
  <tbody>
    <tr>
      <th>Active</th>
      <th>Name</th>
      <th>Price</th>
      <th>Delete</th>
    </tr>
    <tr>
      <td class="table-admin-panel-active"><input type="checkbox"></td>
      <td> <input class="name" type="text" value="Example 1"></td>
      <td><input type="number" value="10"></td>
      <td class="table-admin-panel-remove"><i class="fa fa-times" aria-hidden="true"></i></td>
    </tr>
    <tr>
      <td class="table-admin-panel-active"><input type="checkbox" checked=""></td>
      <td> <input class="name" type="text" value="Example 2"></td>
      <td><input type="number" value="20"></td>
      <td class="table-admin-panel-remove"><i class="fa fa-times" aria-hidden="true"></i></td>
    </tr>
    <tr>
      <td class="table-admin-panel-active"><input type="checkbox" checked=""></td>
      <td> <input class="name" type="text" value="Example 3"></td>
      <td><input type="number" value="30"></td>
      <td class="table-admin-panel-remove"><i class="fa fa-times" aria-hidden="true"></i></td>
    </tr>
    <tr>
      <td class="table-admin-panel-active"><input type="checkbox" checked=""></td>
      <td> <input class="name" type="text" value="Example 4"></td>
      <td><input type="number" value="40"></td>
      <td class="table-admin-panel-remove"><i class="fa fa-times" aria-hidden="true"></i></td>
    </tr>
  </tbody>
</table>
<div class="buttons">
  <button class="btn-bps btn-save">Zapisz</button>
</div>

---

元素

在循环（

。每个

）之外定义和实例化一次，并在每次迭代中保持相同的引用

---

尝试在循环内实例化它。

您需要在第一个循环内声明元素。现在，每次迭代都会覆盖元素对象的值。请参阅下面的代码

$(document).ready(function() {
  $(".btn-save").click(function(event) {        
    var output = new Array();
    $(this).parent(".buttons").siblings("table").find("tr").each(function(index, el) {
        var element = new Object(); //NEW ELEMENT LOCATION
        $(this).find("td input").each(function(index2, el) {
          if (index !== 0) {
            if (index2 === 0) {
              var checkboxStatus = $(this).prop("checked");
              if (checkboxStatus === true) {
                element["active"] = "1";
              } else {
                element["active"] = "0";
              }
            } else if (index2 === 1) {
              element["name"] = $(this).val();
            } else if (index2 === 2) {
              element["value"] = $(this).val();
            }
            element["id"] = index - 1 + "";
          }
        });
        output[index] = element;
      });
      console.log(output);
  });
});

---

谢谢你解决了我的问题。如果它具有相同的名称

元素

，为什么现在它是另一个对象？这都是关于范围的。您最初拥有的元素范围在循环之外，所以当您访问元素时，您只引用了对象的一个实例。将其移动到第一个循环中时，它会为每一行创建对象的新实例。

$(document).ready(function() {
  $(".btn-save").click(function(event) {        
    var output = new Array();
    $(this).parent(".buttons").siblings("table").find("tr").each(function(index, el) {
        var element = new Object(); //NEW ELEMENT LOCATION
        $(this).find("td input").each(function(index2, el) {
          if (index !== 0) {
            if (index2 === 0) {
              var checkboxStatus = $(this).prop("checked");
              if (checkboxStatus === true) {
                element["active"] = "1";
              } else {
                element["active"] = "0";
              }
            } else if (index2 === 1) {
              element["name"] = $(this).val();
            } else if (index2 === 2) {
              element["value"] = $(this).val();
            }
            element["id"] = index - 1 + "";
          }
        });
        output[index] = element;
      });
      console.log(output);
  });
});