javascript - 根据类别选择数据表数据

Question

我试图通过单击按钮来根据行的类选择数据表数据。例如:

我的 table :

<table id="productsTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Product ID</th>
            <th>Brand</th>
            <th>Category</th>
            <th>Description</th>
            <th>Price</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {{#each context}}
        <tr>
            <td class="product_id">{{product_id}}</td>
            <td class="brand">{{brand}}</td>
            <td class="category">{{category}}</td>
            <td class="description">{{description}}</td>
            <td class="price">{{price}}</td>
            <th></th>
            <th><button type="button" class="btn btn-info" id="btn-add">Add to Cart</button></th>
        </tr>
        {{/each}}
    </tbody>
</table>

如果我点击添加到购物车按钮，我希望它根据其类别选择product_id和price。理想情况下，它会是这样的:

$("button").click(function() {
     id = this.product_id;
     price = this.price;
});

有人可以帮忙吗？

到目前为止，我最接近的是:

var table = $("#productsTable").DataTable();
var data = table.row( $(this).parents('tr') ).data();
console.log(data[4]); //selects price

但是这种方法对我来说不起作用，因为表之间的列可能位于不同的位置。

提前致谢!

Answer 1

你可以这样做。

 $("button").click(function() {
            id =  $(this).parent().parent().children('td.product_id').text();
            price = $(this).parent().parent().children('td.price').text();
        });

这是fiddle