Calculate running total in HTML Table using JavaScript in ASP.Net

sowjanya
 
on May 08, 2019 02:54 AM
Sample_197522.zip
8509 Views

Hi ,

i have a html table with 4 columns , in this the multiplication of 2nd and 3rd column (this value entered by user) will be displayed in 4th coulumn . here i am using innerhtml to add the value in to particular coulumn but its not added.

 Code -

<script type="text/javascript">
    function onMnDUnitChange(txtField, iPropOrder) {
        var rsSection, msg = '';
        rsSection = mndCalProp[iPropOrder]
        var sTemp = txtField.value;
        var totalMnDUnits = 0;
        var totalMnDScores = 0;
        if (txtField.value == "" || txtField.value == null) {
            mndCalProp[iPropOrder].units = 0;
            mndCalProp[iPropOrder].score = 0;
        }
        else {
            mndCalProp[iPropOrder].units = sTemp;
        }
        for (iLoop = 0; iLoop < mndCalProp.length; iLoop++) {
            mndCalProp[iPropOrder].score = parseInt(mndCalProp[iPropOrder].devicescore, 10) * parseInt(mndCalProp[iPropOrder].units, 10);
            totalMnDUnits = totalMnDUnits + parseInt(mndCalProp[iPropOrder].units, 10);
            totalMnDScores = totalMnDScores + parseInt(mndCalProp[iPropOrder].score, 10);
            var lblScroreName;
            lblScroreName = 'lblMnDScore' + iLoop;
            var lblctl;

            if (mndCalProp[iPropOrder].score == 0) {

                lblctl = document.getElementsByName(lblScroreName);
                document.getElementsByName(lblScroreName).innerHTML = "";
            }
            else {
                lblctl = document.getElementsByName(lblScroreName);
                document.getElementsByName(lblScroreName).innerHTML = mndCalProp[iPropOrder].score;
            }
        }
        if (totalMnDUnits.score == 0) {
            document.getElementById("lblMnDTotalUnits").innerHTML = "";
        }
        if (totalMnDScores == 0) {
            document.getElementById("lblMnDTotalScores").innerHTML = "";
        }
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 08, 2019 04:34 AM

Hi sowjanya,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

Demo