将动态 table 转换为数组

Question

我有一个 table 动态更新（感谢那些帮助我上次 publish/subscription 查询的人），我想将每个更新行的数据存储到一个数组中，我然后将插入到 mongodb 集合中。我的Table如下：

<template name="choral">
<div class="container" style="padding-top: 25px">
  <div class="table-responsive">
    <form id="orderForm">
    <table id ="productList" class="table table-borderless table-dark">
      <thead class="thead-light">
        <tr>
            <th>Title:</th>
            <th>See the Music:</th>
            <th>Hear the Music:</th>
            <th>Format:</th>
            <th>Price (per copy):</th>
            <th>Quantity:</th>
        </tr>
      </thead>
      <tbody>
         {{#each pieces}}
        <tr id="itemList">
            <td id="name">{{name}}</td>
            <td id="pdf">PDF</td>
            <td id="audio">AUDIO</td>
            <td id="format">FORMAT</td>
            <td id="price">{{score}}</td>
            <td id="qty"><input type ="number" name ="quantity"></td>
        </tr>
        {{/each}}
      </tbody>
      <tfoot>
            <tr>
                <td colspan="5"></td>
                <td><button id ="#addItems" class="button" type ="submit">Add to Cart</button></td>
            </tr>
        </tfoot>
  </table>
  </form>
  </div>
</div>

我想从 table 正文的每一行中提取数据并将动态数据存储到一个数组中。像这样：

Template.choral.events({
'click #addItems': function(e){
    e.preventDefault();
    var cartItem =[];

    $('#itemList tr').each(function(){
        var item = [];
        var name = $('#name',this).val();
        var price = $('#price',this).val();
        var qty = $('#qty',this).val();
            item.push({name, price, qty});
            cartItem.push([item]);
    });
    console.log(cartItem)
}

});

我不知道这个想法在通过空格键调用助手填充 table 时是否可行，或者这是否是 .each() 的有效使用。最终，这些查询的最终结果应该是这样的：

cartItems [{name1, price1, qty},{name2, price2, qty}]

Answer 1

首先，不要在生成的 HTML 中生成相同的 id 属性——这是无效的。使用 class 代替，像这样：

    {{#each pieces}}
    <tr class="itemList">
        <td class="name">{{name}}</td>

...等等

其次，jQuery select 或 $('#itemList tr') 没有 select 任何东西，因为 #itemList 不包含任何tr后代，而是本身一个tr。所以连同之前的评论，selector 应该是 $('tr.itemList').

然后，在您的 jQuery 代码 select 中通过 class 属性（使用 .）并在 this 上下文中进行，因此您匹配仅在当前行内：

var cartItem =[];

$('tr.itemList').each(function() {
    var name = $('.name', this).val();
    var price = +$('.price', this).val(); // convert to number?
    var qty = +$('.qty', this).val(); // (idem)
    var item = {name, price, qty}; // just assign to item
    cartItem.push(item); // don't use square brackets here
});

您可能希望将价格和数量转换为数字。在那种情况下使用一元 + （见上文）。

我不认为你希望 item 是一个数组，而只是具有三个属性的对象。

另请注意 push 参数中的修复。

将动态 table 转换为数组

convert dynamic table into array

javascript

jquery

meteor

spacebars