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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">

  <div class="row">
<div class="col-md-12 text-right">
para birimi değiştir
</div>
    <div class="col-md-12">

      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th style="width:5%;">Görsel</th>
            <th class="col-md-5">Ürün/Hizmet</th>
            <th class="text-center">Birim</th>
            <th class="text-center">Br.Fiyat</th>
            <th class="text-center">Miktar</th>
            <th class="text-center">İskonto</th>
            <th class="text-center">Tutar</th>
            <th style="width:8%;"></th>
          </tr>
        </thead>
        <tbody>

          <tr data-rowtype="row" class="rowline">
            <td class="text-center"><i class="fa fa-picture-o" aria-hidden="true"></i></td>
            <td><input type="text" class="form-control input-sm customInput" /></td>
            <td><input type="text" class="form-control input-sm customInput" /></td>
            <td><div class="input-group proposalInputGroup-right"><input type="text" class="form-control input-sm customInput numericInput priceInput inputTextRight" data-priceid="1" data-id="1" /><div class="input-group-addon"><i class="fa fa-try" aria-hidden="true"></i></div></div></td>
            <td><input type="text" class="form-control input-sm customInput numericInput quantityInput" data-quantid="1" data-id="1" /></td>
            <td><div class="input-group proposalInputGroup"><div class="input-group-addon">%</div><input type="text" class="form-control input-sm customInput numericInput discountInput" data-discountid="1" data-id="1"></div></td>
            <td><div class="input-group proposalInputGroup-right"><input...

CSS

.customInput {border: 1px solid #ccc;
  border-radius: 0;
  padding-top:18px; padding-bottom:18px;
   -webkit-box-shadow: inset 0px 0px 0px #000000;
  -moz-box-shadow: inset 0px 0px 0px #000000;
  box-shadow: inset 0px 0px 0px #000000;
  font-family:courier new;
}
.customInput:focus {border: 1px solid #cccccc;
  border-radius: 0;
   -webkit-box-shadow: inset 0px 0px 0px #000000;
  -moz-box-shadow: inset 0px 0px 0px #000000;
  box-shadow: inset 0px 0px 0px #000000;
}


.proposalInputGroup input {border: 1px solid #cccccc;
  border-left: 0;
  -webkit-box-shadow: inset 0px 0px 0px #000000;
  -moz-box-shadow: inset 0px 0px 0px #000000;
  box-shadow: inset 0px 0px 0px #000000;
}

.proposalInputGroup input:focus {
  border: 1px solid #cccccc;
  border-left: 0;
  -webkit-box-shadow: 0px 0px 0px #000000;
  -moz-box-shadow: 0px 0px 0px #000000;
  box-shadow: 0px 0px 0px #000000;
}

.proposalInputGroup .input-group-addon {
  border-radius: 0;
  border-right: 0;
  background: #fff;
  padding-left: 7px;
  padding-right: 0;
}














.proposalInputGroup-right input {border: 1px solid #cccccc;
  border-right: 0;
  -webkit-box-shadow: inset 0px 0px 0px #000000;
  -moz-box-shadow: inset 0px 0px 0px #000000;
  box-shadow: inset 0px 0px 0px #000000;
}

.proposalInputGroup-right input:focus {
  border: 1px solid #cccccc;
  border-right: 0;
  -webkit-box-shadow: 0px 0px 0px #000000;
  -moz-box-shadow: 0px 0px 0px #000000;
  box-shadow: 0px 0px 0px #000000;
}

.proposalInputGroup-right .input-group-addon {
  border-radius: 0;
  border-left: 0;
  background: #fff;
  padding-right: 7px;
  padding-left: 0;
}

.inputTextRight{
  background:#fff; text-align:right;
}
.totalInput[disabled] {
  background: #fff;
}


.proposalActionGroup button{ border:0; padding:10px 5px; background:none; }
.proposalActionGroup button:hover { background:none; color:#ccc; }
.proposalActionGroup button:focus { background:none; color:#ccc; }

JavaScript

$('.numericInput').val("0");

//nokta basıp virgle çevir
$('.numericInput').keypress(function(evt){ if(evt.which==46){ $(this).val($(this).val()+','); evt.preventDefault(); } });

//sadece rakam yazılabilir
$('.rowtr').on('keydown','.numericInput', function(e){ -1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault() });

$('.quantityInput').on('keydown, keyup', function(){
  var id = $(this).data("id");
  var price = $('*[data-rowtype="row"]').find($('input[data-priceid="' + id + '"]')).val().replace(',', '.');
  var quantity = $('*[data-rowtype="row"]').find($('input[data-quantid="' + id + '"]')).val().replace(',', '.');
  var discount = $('*[data-rowtype="row"]').find($('input[data-discountid="' + id + '"]')).val().replace(',', '.');
  var netice = hesapla(parseFloat(price), parseFloat(quantity), parseFloat(discount));
  $('*[data-rowtype="row"]').find($('input[data-totalid="' + id + '"]')).val(parseFloat(netice).toFixed(2));
});

$('.priceInput').on('keydown, keyup', function(){
 var id = $(this).data("id");
  var price = $('*[data-rowtype="row"]').find($('input[data-priceid="' + id + '"]')).val().replace(',', '.');
  var quantity = $('*[data-rowtype="row"]').find($('input[data-quantid="' + id + '"]')).val().replace(',', '.');
  var discount = $('*[data-rowtype="row"]').find($('input[data-discountid="' + id + '"]')).val().replace(',', '.');
  var netice = hesapla(parseFloat(price), parseFloat(quantity), parseFloat(discount));
  $('*[data-rowtype="row"]').find($('input[data-totalid="' + id + '"]')).val(parseFloat(netice).toFixed(2));
});

$('.discountInput').on('keydown, keyup', function(){
 var id = $(this).data("id");
  var price = $('*[data-rowtype="row"]').find($('input[data-priceid="' + id + '"]')).val().replace(',', '.');
  var quantity =...