CODEWITHSUNDEEP
jqueryhtml
Bad Discoverer
Bad Discoverer

Reputation: 96

JQuery Get Element Name On Html Table

I have a table. It's keep product name, amount and price..

When I want to change amount 2-3-4 or another number it's change just first row.

How can I change the result for all 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 is 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 is 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 is 23*1 (amount) --></td>
  </tr>
</table>

<script>
    $('#amount').keyup(function () { 
        var amount= $("#amount").val();
        var price = $(this).closest('tr').children('td.price').text();
        var result = amount * price;
        $("#result").html(result).show();
    });
</script>

Upvotes: 1

Views: 1028

Answers (2)

Maurice Perry
Maurice Perry

Reputation: 32831

Try to use classes (IDs must be unique, as stated in the comments):

<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 is 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 is 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 is 23*1 (amount) --></td>
   </tr>
</table>

<script>
$('.amount').keyup(function () { 
    var amount= $(this).val();
    var price = $(this).closest('tr').children('td.price').text();
    var result = amount * price;
    $(this).closest('tr').children('td.result').html(result).show();
});
</script>

Fiddle here

UPDATE:

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 is 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 is 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 is 23*1 (amount) --></td>
   </tr>
   <tr>
     <td colspan="3">Total</td>
     <td id="total"><!-- Total --></td>
   </tr>
</table>

JavaScript:

$('.amount').keyup(function () { 
    var amount= $(this).val();
    var price = $(this).closest('tr').children('td.price').text();
    var result = amount * price;
    $(this).closest('tr').children('td.result').text(result).show();
    var total = 0;
    $(".result").each(function() {
        var val = parseFloat($(this).text());
        if (!isNaN(val)) {
            total += val;
        }
    });
    $("#total").text(total === 0 ? "" : total);
});

New fiddle here

Upvotes: 4

Satpal
Satpal

Reputation: 133453

IDs must be unique. You can use 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 is 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 is 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 is 23*1 (amount) -->
        </td>
    </tr>
</table>

JS

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

DEMO

Upvotes: 5

Related Questions