CODEWITHSUNDEEP
javascriptphp
Dayz
Dayz

Reputation: 269

Do calculation dynamically when inputting the numbers in corresponding row - Javascript

There are m students and n criteria columns in a student row and a total column in the same row. But the total has to be calculated dynamically when inputting the numbers in corresponding row only. what all modifications needed? In this manner, all the inputs in the first row are summed up. But only row-wise summing needed. 

<script>
    var num=[];
    function recalculate(rowData,studCode) {        
        var n = document.getElementById('criteria_count').value;    
        num.push(parseFloat(document.getElementById('criteria_mark_'+rowData).value));
        var total=0;

        for (var i = 0; i <n; i++) {
            total = total + parseFloat(num[i]) ;
            if (!isNaN(total)) {
                document.getElementById('total_mark_'+studCode).value = Math.round(total);
            }
        }      
    }
</script>

Upvotes: 0

Views: 50

Answers (1)

D. Foley
D. Foley

Reputation: 1024

Hopefully I understand your requirements correctly. I made a JSFiddle detailing how to achieve what you have explained (assuming I understood you correctly).

https://jsfiddle.net/z0d4y8ao/12/

This is looking through each on the specified row, and is calculating the total and putting it separately into a result element.

If you use this code keep in mind that it is raw javascript and that you will have to find the result yourself so you can insert the total value, (personally I create unique ID's with the server side language.).

function calcNewVal(rowID)
{
    var row = document.getElementById(rowID);
    var tdCount = row.childElementCount - 1;
    var total = 0;
    var currentTd = null;

    var resultText = document.getElementById('result0');

    for(var i = 0; i < tdCount; i++)
    {
        currentTd = row.children[i].childNodes[0].value;
        total += parseInt(currentTd);
    }

    console.log(total);

    resultText.innerHTML = total;
}

the html:

<table id="myTable">
<tr>
    <th>Subject1</th>
    <th>Subject2</th>
    <th>Subject3</th>
    <th>Result</th>
</tr>
<tr onchange="calcNewVal(this.id)" id="row0">
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td id="result0"></td>
</tr>
<tr id="row1">
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td><input type="text" value="13"></td>
    <td id="result1"></td>
</tr>

Upvotes: 1

Related Questions