Выбор данных данных на основе класса

Question

Я пытаюсь выбрать данные данных, основанные на классе строки, одним нажатием кнопки. Например:

Мой стол:

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

Если я нажимаю мою Add to Cart кнопку, я хочу, чтобы выбрать product_id and 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