なぜ配列はループからのみ最後のオブジェクトを使用して作成されましたか？

Question

私はオブジェクトで構成されるれる配列を作成しようとしています。最後に、配列の項目数は同じですが、すべてが最後のループオブジェクトです。それは何らかの参考のようです。私は本当にどこに問題があるか分かりません。

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

CodePen JS：

$(document).ready(function() { 
    $(".btn-save").click(function(event) { 
    var element = new Object(); 
    var output = new Array(); 
    $(this).parent(".buttons").siblings("table").find("tr").each(function(index, el) { 
     $(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); 
    }); 
}); 

Answer 1

あなたは最初のループの内側の要素を宣言する必要があります。今では、反復ごとに要素オブジェクトの値を上書きしています。以下のコードを参照してください。

$(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); 
    }); 
}); 

Answer 2

element

一旦ループ（.each）と、各反復で同じ基準を維持外で定義とインスタンス化されます。

は、ループ内でそれをインスタンス化してみます。