CODEWITHSUNDEEP
javascriptphphtml
Sanjay
Sanjay

Reputation: 13

Total of a particular column from html table having multiple rows

My Java Script Code

<script>
    $(function(){
        $('#addRow').click(function(){
            var html = $('#row_template').html();
            $('#dataTable').append(html);
            $(".tablerow").each(function(index) {
                $(this).html(index + 1);
            });
        });
        $('#deleteRow').click(function(){
            $('#dataTable .mychkbox:checked').parents('tr').remove();
        });
        $('#dataTable').on('change','.select-desc',function(){
            var cur_val = $(this).val();
            $(this).parents('tr').find('input[name="rate[]"]').val(cur_val);
        });
        $('#dataTable').on('keyup','input[name="qty[]"]', function(){
            var qty = +$(this).val();
            var unit = +$(this).parents('tr').find('input[name="rate[]"]').val();
            $(this).parents('tr').find('input[name="amt[]"]').val(qty*unit);
            var totamt = 0 ;
            var theTbl = document.getElementById('dataTable');

            for(var i=0;i<theTbl.length;i++)
            {
                for(var j=0;j<theTbl.rows[i].cells.length;j++)
                {
                    totamt = totamt + theTbl.rows[i].cells[4].InnerHTML;
                }
            }
        });
    });
</script>

My HTML Code is

<!DOCTYPE html>
<html>
    <div class="left">
        <h2><span class="orange">Work Order Items</span></h2>
        <table>
            <tr>
                <td><input type="button" value="Add Row" id="addRow" /></td>
                <td><input type="button" value="Remove Row" id="deleteRow" /></td>
            </tr>
        </table>
    </div>
    <table id="dataTable" class="form" border="0" width='100%'>
        <tr>
            <td></td>
            <td>No</td>
            <td>Item Description</label></td>
            <td>Qty</td>
            <td>Rate</td>
            <td>Amount</td>
            <td>Cert No</td>
            <td>C Date</td>
        </tr>
    </table>
    <table id="row_template" style="display:none">
        <tr>
            <td><input type="checkbox" name="chk[]" class="mychkbox" /></td>
            <td class="tablerow"></td>
            <td>
               <?php
                    $sql = "SELECT itrate,CONCAT(itname,'|',itcode) as mname FROM ITMAST ";
                    $result = mysql_query($sql) or die(mysql_error());
                    echo "<select name='itname[]' id='itname' class='select-desc' >";
                    echo "<option value=''>-- Select Item --</option>";
                        while ($row = mysql_fetch_array($result)) 
                        {
                            echo "<option value = '{$row['itrate']}'";
                                if ($pitcode == $row['itrate'])
                                    echo "selected = 'selected'";
                            echo ">{$row['mname']}</option>";
                        }
                        echo "</select>";
                ?>
            </td>
            <td><input type="text" name="qty[]" id="qty" size="6" class='rightJustified'></td>
            <td><input type="text" name="rate[]" id="rate" size="8" class='rightJustified' readonly></td>
            <td><input type="text" name="amt[]" id="amt" size="9" class='rightJustified' readonly></td>
            <td><input type="text" maxlength="10" size="8" name="txtcertno[]"></td>
            <td><input type="date" maxlength="10" size="10" name="txtcdate[]"></td>
        </tr>
    </table>
</html>

I am trying to take total of amount column i.e. amt[] after each entry of a row, but I am not getting it properly, I have written Javascript function for the same but some thing may be wrong in it

Upvotes: 0

Views: 1083

Answers (2)

Julo0sS
Julo0sS

Reputation: 2102

I did not correct all of your mistakes, You should check @Samurai answer for more details (such as use of the 'id' and other things)

Main problem was, as I said in comment, use of innerHTML which returned "

another thing, your theTbl var was not good, you could never call .length on it. To solve that, you had to handle it this way : 

var totamt = 0 ;
var theTbl = $('#dataTable');
//You are using jquery, so use jquery selectors...
var trs = theTbl.find("input[name='amt[]']");
//find there the AMT[] INPUTS, not the rows...
console.log("how many amt inputs? : "+trs.length);
for(var i=0;i<trs.length;i++)
{
    //fetch the inputs, and make your calculations here
    console.log("amount from row "+i+" = "+trs[i].value);
    //do not forget, as Samurai said, to convert html to numeric...
    $("#total").html(totamt+=parseFloat(trs[i].value));         
}

Here is a working solution :

http://jsfiddle.net/nxm0ye54/20/

Upvotes: 1

Samurai
Samurai

Reputation: 3754

First to point out a few mistakes:

  • $('#row_template').html(): browsers automatically add tbody to the table, so you end up having multiple tbody in your main table which of course won't cause any problem on its own, if that's the desired output.
  • You're misusing ID. Each tr has multiple td with inputs that share the same ID. Instead you should use class.
  • To calculate the total amount you're getting the innerHTML of the cells which don't hold a number, but an input element. Instead you want the value these input elements are holding.
  • You need to convert the values to numbers before doing math on them, otherwise it will assume they're string and just put them beside each other. (e.g. 0+1+2 = 012 and not 3). You should use parseInt or parseFlout which the latter suits this case better.

A few modifications to your code:

 $('#addRow').click(function () {
     var html = $('#row_template tbody').html();
     $('#dataTable tbody').append(html);

And - since you're using jQuery - I completely changed the calculation to a jQuery version:

//gt(0) cause the first row contains headers
//eq(5) cause we want the 6th cell (Amount)
var totamt = 0;
$('#dataTable tr:gt(0)').each(function() {
    var newAmt = $(this).find('td:eq(5) input[type=text]').val();
    totamt += parseFloat(newAmt);
});

Upvotes: 1

Related Questions