javascript выберите текущий div

Question

Я хочу разместить выбранный продукт с количеством и ценой в другом теге div, используя функцию jquery Click. Evertime Я нажимаю только его первое значение массива переменной «продукт».

Как выбрать значения текущей строки таблицы.

шаблон Twig

<tr> 
<td class="reference">{{product.reference}}</td> 
<td class="product">{{product.productNr}} </td> 
<td class="product">{{product.productDesp}} </td> 
<td class ="price">{{product.price}}</td> 
<td class="input"><input type="text" /></td> 
<td class="warenkorb"><button type='submit'>in den Warenkorb</button></td> 
</tr> 

<div id ="cart"> 
<!-- Here comes the selected product by the user --> 
???????? 
</div> 

Мои Javascript:

$('.warenkorb').click(function(){ 
      var reference =('.reference').text(); 
      alert(reference); 
     }); 

}); 

данных:

------------------------------------------------------ 
| reference | product | ProductNr | quantity | price | 
______________________________________________________ 
|Jack store| Apple | 12435436 | 7  | 70€ | 
______________________________________________________ 
|bill store| Apple | 32534534 | 4  | 34€ | 
______________________________________________________ 

Answer 1

Вы можете использовать this элемент. Это ссылка на элемент, который был нажат. Таким образом, вы можете использовать jQuery для выбора значений из нужной строки.

$('button[type=submit]').click(function(){ 
    var $parent = $(this).closest('tr'), 
     name = $parent.find('.product-name').text(), 
     quantity = $parent.find('.input input').val() || 1, 
     price = $parent.find('.price').text(); 

    $('#cart').text(quantity + 'x ' + name + ' - ' + price); 
}); 

JSFiddle

Answer 2

Попробуйте это:

$('.warenkorb button').click(function() { 
 
    \t var closestTr = $(this).closest('tr'); 
 
    
 
    var reference = closestTr.find('.reference').html(); 
 
    var product = closestTr.find('.product').html(); 
 
    var price = closestTr.find('.price').html(); 
 
    var textdata = closestTr.find('input').val(); 
 
    
 
    // If you want last value to top 
 
    $("#cart").prepend(reference+"|"+product+"|"+price+"|"+textdata); 
 
    
 
     
 
    // If you want last value to bottom 
 
    $("#cart").append(reference+"|"+product+"|"+price+"|"+textdata); 
 
    
 
    // If you want replace div data 
 
    $("#cart").html(reference+"|"+product+"|"+price+"|"+textdata); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 

 
<tr> 
 
    <td class="reference">a1</td> 
 
    <td class="product">a2</td> 
 
    <td class="price">a3</td> 
 
    <td class="input"> 
 
    <input type="text" /> 
 
    </td> 
 
    <td class="warenkorb"> 
 
    <button type='submit'>in den Warenkorb</button> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td class="reference">b1</td> 
 
    <td class="product">b2</td> 
 
    <td class="price">b3</td> 
 
    <td class="input"> 
 
    <input type="text" /> 
 
    </td> 
 
    <td class="warenkorb"> 
 
    <button type='submit'>in den Warenkorb</button> 
 
    </td> 
 
</tr> 
 

 
</table> 
 
<div id="cart"> 
 
    <!-- Here comes the selected product by the user --> 
 
    ???????? 
 
</div>