JavaScript選擇當前格

我想要將選定的產品與數量和價格放在另一個div標籤使用jquery點擊功能。 Evertime我點擊它只顯示變量「product」的第一個數組值。JavaScript選擇當前格

如何爲表格選擇當前行的值。

嫩枝模板

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

來源

2016-02-02 gabf Hahn

我認爲正確的方式來處理，這是不是周圍的DOM元素移動，但具有某種用您的模板暴露的購物車變量。 – Matt

可以使用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

來源

2016-02-02 14:00:53

試試這個：

$('.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>

來源

2016-02-02 14:06:42

JavaScript選擇當前格

回答

相關問題