JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-8">




  <table id="ffProposalTable">
    <thead>
      <tr>
        <th class="text-center">BR.FİYAT</th>
        <th class="text-center">MİKTAR</th>
        <th class="text-center">İSKONTO</th>
        <th class="text-center">TUTAR</th>
        <th class="text-center"></th>
      </tr>
    </thead>
    <tbody>
      <tr id="tr1" data-rowid="1" data-rowtype="row">
        <td style="padding:5px;">
          <input type="text" class="form-control priceInput numericInput" value="0" data-priceid="1" />
        </td>
        <td style="padding:5px;">
          <input type="text" class="form-control quantityInput numericInput" value="0" data-quantityid="1" />
        </td>
        <td style="padding:5px;">
          <input type="text" class="form-control discountInput numericInput" value="0" data-discountid="1" />
        </td>
        <td style="padding:5px;">
          <input type="text" class="form-control totalInput numericInput" disabled value="0" data-totalid="1" />
        </td>
        <td><a href="#" class="btn btn-alert sil" data-id="1">X</a></td>
      </tr>




    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">
          <button type="button" id="newProposalLine" class="btn ffCustomDefault">Satır Ekle</button>
        </td>
      </tr>

    </tfoot>
  </table>

</div>

JavaScript

$(document).on('keypress', '.numericInput', function (evt) {
        if (evt.which == 46) { $(this).val($(this).val() + ','); evt.preventDefault(); }
    });
    
/* Satır Ekle */
$('#newProposalLine').click(function() {
  //var rowCount = ($("#ffProposalTable > tbody > tr").length) + 1;
  var rowCount = (parseInt($('#ffProposalTable tbody tr:last').attr('data-rowid'))) + 1;
  $('#ffProposalTable tbody').append('<tr id="tr' + rowCount + '" data-rowid="' + rowCount + '" data-rowtype="row">' +
    '<td style="padding:5px;"><input type="text" class="form-control priceInput numericInput" value="0" data-priceid="' + rowCount + '" /></td>' +
    '<td style="padding:5px;"><input type="text" class="form-control quantityInput numericInput" value="0" data-quantityid="' + rowCount + '" /></td>' +
    '<td style="padding:5px;"><input type="text" class="form-control discountInput numericInput" value="0" data-discountid="' + rowCount + '" /></td>' +
    '<td style="padding:5px;"><input type="text" class="form-control totalInput numericInput" disabled value="0" data-totalid="' + rowCount + '" /></td>' +
    '<td><a href="#" class="btn btn-alert sil" data-id="' + rowCount + '">X</a></td>' +
    '</tr>');
});
/* /Satır Ekle */

/* Satır Sil */
$(document).on('click', '.sil', function() {
  var silinecek = $(this).data("id");
  $('#tr' + silinecek + '').remove();
  var rowLength = $("#ffProposalTable > tbody > tr").length;
});
/* /Satır Sil */


/* Miktar Hesapla */
$(document).on('keydown, keyup', '.quantityInput', function() {

  var id = $(this).data("quantityid");
  var price = $('input[data-priceid="' + id + '"]').val().replace(',', '.');
  var quantity = $('input[data-quantityid="' + id + '"]').val().replace(',', '.');
  var discount = $('input[data-discountid="' + id + '"]').val().replace(',', '.');
  var netice = hesapla(parseFloat(price), parseFloat(quantity), parseFloat(discount));
  $('input[data-totalid="' + id + '"]').val(netice);
});
/* /Miktar Hesapla */

/* Birim...