Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="button" value="+" id="add_row" />
  <table class="table table-bordered" id="example">
    <thead>
      <tr>
        <th class="text-center">A</th>
        <th class="text-center">B</th>
        <th class="text-center">C</th>
      </tr>
    </thead>
    <tbody id="append_position">
      <tr class="row_data">
        <td class="text-center"><input type="text" class="a_row" value="172"></td>
        <td class="text-center"><input type="text" class="b_row" value="50"></td>
        <td class="text-center"><input type="text" class="c_row" value="8000"></td>
      </tr>
      <tr class="row_data">
        <td class="text-center"><input type="text" class="a_row" value="100"></td>
        <td class="text-center"><input type="text" class="b_row" value="50"></td>
        <td class="text-center"><input type="text" class="c_row" value="500"></td>
      </tr>
    </tbody>
  </table>
  <div id="total"></div>
 
<div id="template" style="display:none;">
    <table>
    <tr class="row_data">
      <td class="text-center"><input type="text" class="a_row" value=""></td>
      <td class="text-center"><input type="text" class="b_row" value=""></td>
      <td class="text-center"><input type="text" class="c_row" value=""></td>
    </tr>
    </table>
</div>
</body>
</html>
 
​
 
$('body').on('click','#add_row',function(){
        $('#template').find('.row_data').clone().appendTo($('#append_position'));
    });
​
    $('#example').on('change', '.a_row', function(event) {
        event.preventDefault();
        var row_total = 0;
        $('.a_row').each(function(index, el) {
            row_total = row_total + Number($(this).val());
        });
​
        $('#total').html('a_row_total = '+ row_total);
        console.log(row_total);
    });
​
    $('#example').on('change', '.b_row', function(event) {
        event.preventDefault();
        var row_total = 0;
        $('.b_row').each(function(index, el) {
            row_total = row_total + Number($(this).val());
        });
​
        $('#total').html('b_row_total = '+ row_total);
        console.log(row_total);
    });
​
    $('#example').on('change', '.c_row', function(event) {
        event.preventDefault();
        var row_total = 0;
        $('.c_row').each(function(index, el) {
            row_total = row_total + Number($(this).val());
        });
​
        $('#total').html('c_row_total = '+ row_total);
        console.log(row_total);
    });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers