循环遍历并将每个表行td元素值存储为对象数组

debugcn 发表于 Dev

新手开发

我有一个可以动态计算并创建新行的表。这是以下内容的摘要：

  <table>
  <tr class="purchase_schedule_table">
      <td><input type="text" name="purchase_place" class="purchase_place_info" style="width: 90%;" ></td>
      <td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch_info" ></td>
      <td><input type="number" name="frequency" style="width: 90%;" class="frequency" ></td>
      <td><input type="number" name="low" style="width: 90%;" class="product_low" ></td>
      <td><input type="number" name="high" style="width: 90%;" class="product_high" ></td>
      <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled ></td>
      <td>
        <div class = "input-group" id="addrow">
          <input type="number" name="product_total" style="width: 90%;" class="product_total"  disabled>
          <span class = "input-group-addon" style="width:1%; background-color:#786bae;border-color:#786bae;">
            <a href="#">
              <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-plus addrow" aria-hidden="true"></span>
            </a>
          </span>
        </div>
      </td>
    </tr>
  </table>

这是一个用于计算值的jquery代码片段：

//calculate purchase schedule monthly total
function calculatePurchaseScheduleMonthlyTotal(){
   var total_sum = 0;

  $('.product_total').each(function () {
     var value = $(this).val();
     total_sum = parseInt(total_sum) + parseInt(value);
  });

   $('.total_sum').val(total_sum);
};

  //calculate purchase schedule
 function calculatePurchaseSchedule(ObjRow) {
    var low = 0;
    var high = 0;
    var average = 0;
    var frequency = 0;
    var total = 0;

    var total_sum = 0;

    frequency = ($(ObjRow).find('.frequency').val() == "") ? 0 :      $(ObjRow).find('.frequency').val();

      high = ($(ObjRow).find('.product_high').val() == "") ? 0 : $(ObjRow).find('.product_high').val();

     low = ($(ObjRow).find('.product_low').val() == "") ? 0 : $(ObjRow).find('.product_low').val();

     average = (parseInt(high) + parseInt(low)) / 2;
     total = average * frequency;

     $(ObjRow).find('.product_total').val(total);
    $(ObjRow).find('.product_average').val(average);


    calculatePurchaseScheduleMonthlyTotal();
};

这也是用于触发计算的代码片段：

$(document).on('focusout','input[type=number]',function () {
       calculatePurchaseSchedule($(this).closest('tr'));
       saveData();
  });

这是用于动态添加表行的代码：

$('#addrow').click(function (e) {
   e.preventDefault();

  var purchase_schedule_row = '<tr class="purchase_schedule_table"><td>  <input type="text" name="purchase_place" class="purchase_place" style="width: 90%;"></td><td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch"></td><td><input type="number" name="frequency" style="width: 90%;" class="frequency"></td><td><input type="number" name="low" style="width: 90%;" class="product_low"></td> <td><input type="number" name="high" style="width: 90%;" class="product_high"></td> <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled></td><td> <div class = "input-group" id="addrow">  <input type="number" name="total" style="width: 90%;" class="product_total" disabled><span class = "input-group-addon" style="width:1%; background-color:#ec6d65;border-color:#ec6d65;"><a href="#"> <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-minus deleterow" aria-hidden="true"></span></a></span></div></td></tr>';

 $('#purchaseScheduleTable').append(purchase_schedule_row);
});

我想要做的是将每个表行td元素值存储为对象数组。我尝试在以下代码中这样做：

  var purchase_place;
  var main_products_purch;
  var frequency;
  var product_low;
  var product_high;
  var product_average;
  var product_total;
  var product_total_sum;
  var purchase_schedule_table = [];
  var purchase_schedule_data = {};

  var count = 1;
 $('.purchase_schedule_table').each(function(){
    $(this).find('.product_total').each(function () {
       product_total =  $(this).find('.product_total').val();
       console.log(product_total);
       purchase_schedule_data.product_total = product_total;
    });
    purchase_schedule_table.push(purchase_schedule_data);
 });
 console.log(purchase_schedule_table);

例如，最终结果应如下所示：

      [
         {purchase_place:  'purchase_place', main_products_purch : 'main_products_purch', frequency:'frequency', product_average: 'product_averager'}
        {purchase_place:  'purchase_place', main_products_purch : 'main_products_purch', frequency:'frequency', product_average: 'product_averager'}
      ]

我究竟做错了什么？提前致谢。

易卜拉欣汗

tr用类purchase_schedule_table依次遍历每个td对象，然后遍历每个对象，创建一个对象并将其推入数组，如下所示。

var arr = [];
$('.purchase_schedule_table').each(function () {
    var obj = {};
    $(this).find('td').each(function () {            
        var input = $(this).find('input')[0];
        obj[input.name] = input.value;
    });
    arr.push(obj);
})

console.log(arr)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。