How to calculate in html table rows using javascript

Question

This is my table image that i have fetched from the another table in this table i am doing some calculation using javascript.When i tried to change the qty value,it should multiply with rate and show it in the total. My problem when i change the value the both rows of the total shows same result.

My code:

<script type="text/javascript">
    function calculate(id){ 
    var tot = 0;
    var qty = document.getElementsByClassName("qty");
    var rate = document.getElementsByClassName("rate");
    var total = document.getElementsByClassName("total");
for(var i = 0; i < qty.length; i++)
{
        tot = parseFloat(qty[i].value) * parseFloat(rate[i].value);
        $(".total").val(tot);
}

} 
</script>

My result i got is

Well of course it is. $(".total").val(tot); modifies EVERY element of class total. Try $(".total").eq(i).val(tot); — TKoL
– TKoL, Commented Nov 22, 2019 at 11:00
@KhalilKhalil $(".total")[i].val(tot) wont work as $(".total")[i] is getting the underlying DOM object therefore it doesnt have a val() method that is a jquery method — Patrick Evans
– Patrick Evans, Commented Nov 22, 2019 at 11:13

TKoL · Accepted Answer · 2019-11-22 11:03:34Z

4

Well of course it is. $(".total").val(tot); modifies EVERY element of class total. Try $(".total").eq(i).val(tot);

Note: this solution won't work if you have other .total elements on the page, outside of the table you're working on. You'll have to select the table first, $('table#tableid .total').eq(i)... to overcome that issue

answered Nov 22, 2019 at 11:03

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacky Over a year ago

i have another doubt can you help me

Jacky Over a year ago

how to sum the value of total

TKoL Over a year ago

before your loop, do var total = 0; inside your loop, do total += tot; After your loop, total will be all tot added up

Jacky Over a year ago

it is not adding

Szymon · Accepted Answer · 2019-11-22 11:03:39Z

1

It does it cause you did not specify which which row specifically should be updated with the following line of code:

$(".total").val(tot);

What you do instead is updating values of all the fields within the class total.

answered Nov 22, 2019 at 11:03

Szymon

918 bronze badges

Collectives™ on Stack Overflow

How to calculate in html table rows using javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related