jQuery

https://www.facebook.com/groups/mediatutorial.jquery.indonesia/permalink/920853344689433/

by konglie

HTML

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr>
            <th class="text-center">
              No
            </th>
            <th class="text-center">
              Name
            </th>
            <th class="text-center">
              Mail
            </th>
            <th class="text-center">
              Mobile
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id='addr0'>
            <td>
              1
            </td>
            <td>
              <input type="text" name='name0' placeholder=' Name' class="form-control" />
            </td>
            <td>
              <input type="text" name='mail0' placeholder=' Mail' class="form-control" />
            </td>
            <td>
              <input type="text" name='mobile0' placeholder=' Mobile' class="form-control" />
            </td>
            <td>
              <input class="a2" name="A" type="text" value=0 />
              <input class="b2" name="B" type="text" value=0 />
              <input class="c2" name="C" type="text" readonly />
            </td>
          </tr>
          <tr id='addr1'></tr>
        </tbody>
        <tr>
          <td colspan="4" align="center">
            <button id="add_row" class="btn btn-default pull-left" value="Add Rows">Tambah</button>
            <button id='delete_row' class="pull-right btn btn-default" value="Delete Rows">Delete</button>
          </td>
        </tr>

      </table>
    </div>
  </div>
</div>

CSS

.table {
  border: 1px solid #ABB7B7;
  margin-left: auto;
  margin-right: auto;
}

.form-control {
  width: 150px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #ABB7B7;
}

JavaScript

function hitung2(el) {
  var a = $(el).parents('td').find('.a2').val();
  var b = $(el).parents('td').find('.b2').val();
  c = a * b; //a kali b
  console.log(c);
  $(el).parents('td').find('.c2').val(c);
}
$(document).ready(function() {
  var i = 1;
  
  $('body').on('keyup', '.a2, .b2', function(){
  	hitung2(this);
  });
  
  $("#add_row").click(function() {
    $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input name='name" + i + "' type='text' placeholder=' Name' class='form-control input-md' /> </td><td><input name='mail" + i + "' type='text' placeholder=' Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder=' Mobile' class='form-control input-md'></td> <td><input class='a2' name='A' type='text' value=0 /><input class='b2' name='B' type='text' value=0 /><input class='c2' name='C' type='text' readonly /></td>");

    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
  });

});