从输入数据值创建 Javascript 多维数组答案

【问题标题】：Creating A Javascript MultiDimentional Array From input data values从输入数据值创建 Javascript 多维数组
【发布时间】：2018-06-25 05:58:44
【问题描述】：

我正在处理表格上的一些数字字段。表格包含项目名称、单价和提交的数量，即数量。每次增加或减少金额我想要一个包含 @ 的产品/项目数组987654321@、item unit price、item Amount、total price of that item。

比如这样

items = 
 [
    ['Name', '5', '2', '10'],
    ['Name2', '15', '2', '30'],
 ]

如果数量是zero，那么该项目将不会出现在数组中。

jQuery(document).ready(function() {
  jQuery(document).on('input', '.se-ticket-qty', function() {
    var items = GetItems();

    // jQuery('input#items').val(items);
    console.log(items);
  });

  function GetItems() {
    jQuery(".se-ticket-qty").each(function(index) {
      var items = [];
      var item_name = jQuery(this).data('name');
      var unit_price = parseFloat(jQuery(this).data('unit-price'));
      var amount = parseFloat(jQuery(this).val());
      var totalPrice = unit_price * amount;

      items = [item_name, unit_price, amount, totalPrice];
    });
    return items;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Front Row</th>
    <td><span class="se-curency">$ </span>5</td>
    <td>
      <input min="0" data-name="Front Row" data-unit-price="5" class="se-ticket-qty" type="number" value="0" />
    </td>
  </tr>
  <tr>
    <th>VIP Seat</th>
    <td><span class="se-curency">$ </span>10</td>
    <td>
      <input min="0" data-name="VIP Seat" data-unit-price="10" class="se-ticket-qty" type="number" value="0" />
    </td>
  </tr>
</table>

【问题讨论】：

标签： javascript jquery multidimensional-array

【解决方案1】：

您正在将 items 重新分配给一个新数组

在每个块外初始化数组
使用.push() 方法填充新的数组元素
在使用 .data() 方法时，使用 camelCase 即 unitPrice 作为虚线键。
为零添加条件语句

代码

function GetItems() {
  var items = []; //Initialize 
  jQuery(".se-ticket-qty").each(function(index) {
    var item_name = jQuery(this).data('name');
    var unit_price = parseFloat(jQuery(this).data('unitPrice'));
    var amount = parseFloat(jQuery(this).val());
    //Add condtion for zero
    if (amount > 0) { 
      var totalPrice = unit_price * amount;
      items.push([item_name, unit_price, amount, totalPrice]); //Use push
    }
  });
  return items;
}

jQuery(document).on('input', '.se-ticket-qty', function() {
  var items = GetItems();

  console.clear();
  console.log(items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Front Row</th>
    <td><span class="se-curency">$ </span>5</td>
    <td>
      <input min="0" data-name="Front Row" data-unit-price="5" class="se-ticket-qty" type="number" value="0" />
    </td>
  </tr>
  <tr>
    <th>VIP Seat</th>
    <td><span class="se-curency">$ </span>10</td>
    <td>
      <input min="0" data-name="VIP Seat" data-unit-price="10" class="se-ticket-qty" type="number" value="0" />
    </td>
  </tr>
</table>

【讨论】：