<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 ---------->
<div class="container">
<div class="row">
<h2>Dinamik Tablo</h2>
<button id="loadRows" class="btn btn-primary btn-block">
Satırları Getir
</button>
<div id="tableArea" style="margin-top:20px;"></div>
<button id="clearRows" class="btn btn-danger btn-block" disabled>
Tabloyu Temizle
</button>
</div>
</div>
@keyframes drop {
from {
opacity:0;
transform: translateY(-20px);
}
to {
opacity:1;
transform: translateY(0);
}
}
.show-row {
opacity: 0;
animation: drop 0.5s ease forwards;
}
@keyframes fadeOutRow {
from {
opacity:1;
transform: translateY(0);
}
to {
opacity:0;
transform: translateY(20px);
}
}
.hide-row {
animation: fadeOutRow 0.4s ease forwards;
}
$(document).ready(function(){
var data = [
{o1:3, odenecek:"3.000,00", o2:1, kalan:"1.000,00"},
{o1:2, odenecek:"2.000,00", o2:2, kalan:"2.000,00"},
{o1:1, odenecek:"1.000,00", o2:3, kalan:"3.000,00"}
];
$("#loadRows").click(function(){
$("#tableArea").empty();
var table = `
<table class="table modern-table">
<thead>
<tr>
<th class="text-center">ORAN</th>
<th class="text-right">ÖDENECEK</th>
<th class="text-center">ORAN</th>
<th class="text-right">OYAKTA KALAN</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>`;
$("#tableArea").append(table);
$.each(data, function(index, item){
var newRow = $("<tr class='show-row'>");
newRow.append("<td class='text-center'>"+item.o1+"</td>");
newRow.append("<td class='text-right'>"+item.odenecek+"</td>");
newRow.append("<td class='text-center'>"+item.o2+"</td>");
newRow.append("<td class='text-right'>"+item.kalan+"</td>");
newRow.css("animation-delay", (index * 0.2) + "s");
$("#tableBody").append(newRow);
});
$("#clearRows").prop("disabled", false);
});
$("#clearRows").click(function(){
$("#tableArea").empty(); // komple tablo gider
$(this).prop("disabled", true);
});
});
