1

I created a table where I can dynamically add multiple rows to it. There's a column to add cost. Now I want to get total cost value of each row at the bottom of the table. How can I get this using JavaScript?

Here is my html code for dynamic table.

<table>
    <thead>
        <tr>
            <th>No</th>
            <th>Title</th>
            <th cost</th>
        </tr>
    </thead>
    <tbody id="body">

        <tr>
            <th>1</th>
            <td>
                <input type="text"  id="title" name="title[]" />
            </td>
            <td>
                <input type="text"  id="cost" name="cost[]" />
            </td>
        </tr>
    </tbody>        
</table>

Javascript function:

$(function(){
        $('.addrow').click(function(){
            addrow();
        });


        function addrow()
        {

            var row =($('#body tr').length-0)+1;
            var tr ='<tr>'+
                '<th>'+row+'</th>'+
                '<td><input type="text" id="title" name="title[]" ></td>'+
                '<td><input type="text"  id="cost" name="cost[]" /></td>'+
                '</tr>';
            $('#body').append(tr);
        }
    });
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Erandi
  • 23
  • 1
  • 7
  • Can't repeat ID's in page, switch to class and loop over them all. Please show what you have tried. There are lots of examples around on how to do this and people don't just write code for you here – charlietfl Aug 23 '15 at 07:25
  • what is `#body`? some element with id `body`? or are you trying to select document body? – rrk Aug 23 '15 at 07:30

2 Answers2

0

If text inputs are the only inputs used, try using https://api.jquery.com/input-selector/ to get all the input selectors.

You can iterate through the input selectors, aggregate the values to give you the total.

NOTE: As mentioned in the comments, do not use same id for all the input tags. It is not a best practice

Sanjay
  • 111
  • 1
  • 9
0

You should iterate the input tags that belong to the table and have an id starting with "cost".

Also, you can not add the row directly to the body, you want to add it after the last row already created.

Try out this (edit:) fiddle (old habits die hard) snippet .

$(document).ready(function(){
        $('#addRow').click(function(){
            addRow();
        });
        $('#totalRow').click(function(){
            totalRow();
        });


        function addRow()
        {
            var rowId = $('#myTable tr').length;
   $('#myTable > tbody:last-child').append(
       '<tr><th>' + rowId + ' </th>' +
       '<td><input type="text"  id="title' + rowId + '" /></td>' +  
                '<td><input type="text"  id="cost' + rowId + '"</td></tr>'
   );
    }
    
        function totalRow()
        {
            var rowId = $('#myTable tr').length;
            var val = 0;
             $("#myTable [id^=cost]").each(function() {      
       val += parseFloat($(this).val());
    });
   $('#myTable > tbody:last-child').append(
       '<tr><th>T</th>' +
       '<td><input type="text" id="totalRow" value="TOTAL" /></td>' +  
                '<td><input type="text" id="totalCost" value="' + val +'" /></td></tr>'
   );
  }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addRow">Add row</div>
<div id="totalRow">Calculate total row</div>
<br>
<table id="myTable">
    <thead>
        <tr>
            <th>No</th>
            <th>Title</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <th>1</th>
            <td>
                <input type="text"  id="title1" value="Example" />
            </td>
            <td>
                <input type="text"  id="cost1" value="25" />
            </td>
        </tr>
    </tbody>        
</table>

Hope it helps!

David
  • 6,695
  • 3
  • 29
  • 46