JQuery Get Element Name On Html Table -

JQuery Get Element Name On Html Table -

i have table. it's maintain product name, amount , price..

when want alter amount 2-3-4 or number it's alter first row.

how can alter result rows

<table> <tr> <td>product name 1 </td> <td><input type="text" id = "amount" value="1"></td> <td id="price">55</td> <td id="result"><!-- here 55*1 (amount) --></td></tr> <tr><td>product name 2 </td> <td><input type="text" id = "amount" value="1"></td> <td id="price">65</td> <td id="result"><!-- here 65*1 (amount) --></td></tr> <tr><td>product name 3 </td> <td><input type="text" id = "amount" value="1"></td> <td id="price">23</td> <td id="result"><!-- here 23*1 (amount) --></td> </tr> </table> <script> $('#amount').keyup(function () { var amount= $("#amount").val(); var cost = $(this).closest('tr').children('td.price').text(); var result = amount * price; $("#result").html(result).show(); }); </script>

ids must unique. can utilize class instead.

html

<table> <tr> <td>product name 1</td> <td> <input type="text" class="amount" value="1" /> </td> <td class="price">55</td> <td class="result"> <!-- here 55*1 (amount) --> </td> </tr> <tr> <td>product name 2</td> <td> <input type="text" class="amount" value="1" /> </td> <td class="price">65</td> <td class="result"> <!-- here 65*1 (amount) --> </td> </tr> <tr> <td>product name 3</td> <td> <input type="text" class="amount" value="1" /> </td> <td class="price">23</td> <td class="result"> <!-- here 23*1 (amount) --> </td> </tr> </table>

js

$('input.amount').keyup(function () { var amount = +$(this).val(); //here utilize '+' convert number var cost = +$(this).closest('tr').find('td.price').text(); var result = amount * price; //here miktar undefined $(this).closest('tr').find('td.result').html(result).show(); });

demo

jquery html