<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<div class="row">
<h2>Animate Table append Rows from Array</h2>
<form >
<div class="form-group">
<label for="exampleFormControlSelect1">Rezerviniz (TL)</label>
<strong><input id="RezervAlan" name="RezervAlan" type='number' class="form-control input-lg" step='0.01' placeholder='0,00' required /></strong>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Nema oranını giriniz (%)</label>
<strong><input id="NemaOran" type='number' class="form-control input-lg" step='0.01' placeholder='0,00' required></strong>
</div>
<!-- maaş gir başlangıç -->
<div class="container-fluid form-group" >
<div class="row">
<div id="changeShipInputs">
<div class="row" >
<div class="col-xs-12 col-md-12 col-sm-12">
<center style="font-weight:bold;"><small style="font-size:15px;color:#680BBA;">Size ait maaş hanelerini giriniz</small><br><small style="color:#780000;">Maaş almadıysanız 0 (Sıfır) giriniz.</small> <hr align="center" width="50%" /> </center>
</div>
</div>
<div class="row" >
<div class="col-xs-6 col-md-6 col-sm-6 text-center" style="border-right-style: solid;border-width: 1px;">
<small for="Seconds" style="font-weight: bold;line-height: 0;color:#00575A;"><span id="sol1"></span> Genel Kurul Sonrası Aylık Maaşınızı giriniz</small>
</div>
<div class="col-xs-6 col-md-6 col-sm-6 text-center">
<small for="Seconds" style="font-weight: bold;line-height: 0;color:#80008A;"><span id="sol2"></span> Genel Kurul Sonrası Aylık Maaşınızı giriniz</small>
</div>
</div><!-- row -->
<div class="row" >
<div class="col-xs-6 col-md-6 col-sm-6" style="border-right-style:solid;border-width: 1px;">
<strong><input style="border-color:#00575A;" id="alan1" name="alan1" value="0.0" type='number' class="form-control input-lg" step='0.01' placeholder='0,00' required /></strong>
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
<strong><input style="border-color:#80008A;" id="alan2" name="alan2" value="0.0" type='number' class="form-control input-lg" step='0.01' placeholder='0,00' /></strong>
</div>
</div><!-- row -->
</div><!-- changeShipInputs -->
</div>
</div><!-- container-fluid -->
<!-- maaş gir bitiş -->
<hr />
<div class="container-fluid" style="padding-left:0;padding-right:0;">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" >
<div class="alert alert-warning" role="alert" style="margin-right:0;padding:0;border: 1px solid #BC4C43;background-color:#FDF1BF;" >
<h6 style="margin:8px 0 0 15px;color:#780000;">Yeni Aylık Maaşınız</h6>
<h5 id="kist" style="font-weight:bold;margin:5px 0 8px 15px;color:#780000;">₺ 0,00</h5>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" >
<div class="alert alert-danger" role="alert" style="margin-right:0;padding:0;border: 1px solid #BC4C43;background-color:#780000;" >
<h6 style="margin:8px 0 0 15px;color:#FFF8E0;">Yeni Rezerviniz</h6>
<h5 id="rezerv" style="font-weight:bold;margin:5px 0 8px 15px;color:#FFF8E0;">₺ 0,00</h5>
</div>
</div>
</div>
</div>
<hr />
</form>
<br>
<center style="font-size: 40px;font-weight:bold;color:#000">%<span id="valBox" class=""></span> </center>
<br />
<div class="form-group">
<div class="d-flex justify-content-between"><label style="color:#000">Maaş Oran Tercihi % <span id="valBox" class=""></span> (Düğmeyi kaydırın)</label>
</div><br />
<!--use value=1-->
<script>
function showVal(newVal){
$("span[id=valBox]").text(newVal);
$("input[name=values]").val(newVal) //assign value..
//$('button#hesapla').trigger('click'); // tetikleme
$(".mto").focus();
}
</script>
<input type="range" id="MaasTercih" class="form-range customRange mto sliderGreen" min="1" max="50" oninput="showVal(this.value)" onchange="showVal(this.value)" >
</div>
<div class="container-fluid" style="color:#000;font-weight:bold;">
<div class="pull-left">% 1</div>
<div class="pull-right" id="oran">% <span id="valBox" class=""></span></div>
</div>
<hr />
<br>
<div class="col">
<table id="zamMakListe" class="table table-striped" style="display:none;" >
<thead>
<tr style="background-color:#000;">
<td style="width: 20%">
<h6 class="pull-right" style="color:#fff;"><b>Yıl</b></h6>
</td>
<td style="width: 40%">
<h6 class="pull-right" style="color:#fff;"><b>Aylık</b></h6>
</td>
<td style="width: 40%">
<h6 class="pull-right" style="color:#fff;margin-right: 15px;"><b>Rezerv</b></h6>
</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<button id="the_button" class="btn btn-success btn-lg btn-block">Click</button>
<br>
<br />
</div>
</div>
.sliderGreen{
accent-color: green;
}
$(document).ready(function(){
var json = '[';
var txt="", yil = 2024, aylik = 11111.1, aylikSag =2222.2, rezerv = 888888.8;
var deger = {};
//txt = '<tr style="background-color:#DFF0D8;"><td style="width: 20%"><h6 class="pull-right" style="color:#000;"><b>' + yil + '</b></h6></td><td style="width: 40%"><h6 class="pull-right" style="color:#000;"><b>' + aylik + '</b></h6></td><td style="width: 40%"><h6 class="pull-right" style="color:#000;margin-right: 15px;"><b>' + rezerv + '</b></h6></td></tr>';
json += '{"Yil":' + yil +',"Aylik":'+ aylik +',"Rezerv":'+ rezerv +'}' ;
function zamanMakinesi(yil=2021, aylik=2125.5, aylikSag=3333.4, rezerv=252222.5) {
var tomar = {};
tomar.yil = yil + 1 ;
tomar.aylik = aylik + 1;
tomar.aylikSag = aylikSag + 1;
tomar.rezerv = rezerv + 1;
return tomar;
}
for(var i=0;i<19;i++){
deger = zamanMakinesi(yil, aylik, aylikSag, rezerv);
yil = deger.yil;
aylik = deger.aylik;
aylikSag = deger.aylikSag;
rezerv = deger.rezerv;
// txt += '<tr style="background-color:#DFF0D8;"><td style="width: 20%"><h6 class="pull-right" style="color:#000;"><b>' + yil + '</b></h6></td><td style="width: 40%"><h6 class="pull-right" style="color:#000;"><b>' + aylik + '</b></h6></td><td style="width: 40%"><h6 class="pull-right" style="color:#000;margin-right: 15px;"><b>' + rezerv + '</b></h6></td></tr>';
json += ',{"Yil":' + yil +', "Aylik":'+ aylik + ',"Rezerv":'+ rezerv +'}';
}
json += ']';
var jsonObject = $.parseJSON(json);
$("#the_button").click(function () {
$("#zamMakListe").show(200);
var row = "";
$("tbody").html("");
$.each(jsonObject, function (i, obj) {
row = $('<tr style="background-color:#AFCEF2"><td style="width: 20%;"><h6 class="pull-right" style="color:#000;"><b>'+ (i+1)+ " - " + obj.Yil + '</b></h6></td><td style="width: 40%"><h6 class="pull-right" style="color:#000;"><b>' + obj.Aylik + '</b></h6></td><td style="width: 40%"><h6 class="pull-right" style="color:#000;margin-right: 15px;"><b>' + obj.Rezerv + '</b></h6></td></tr>');
$("tbody").hide().append(row).delay(200).fadeIn('slow');
});
});
$('#MaasTercih, input').on("change input", function() {
$("#zamMakListe").hide();
});
$('input[type="number"]').focus(function(){
$("#zamMakListe").hide();
});
//$('input').change(function() {
//$("#zamMakListe").hide();
//});
});
