<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">
<h2>SlideDown Append Table</h2>
<button id="loadRows" class="btn btn-primary btn-block">
Satırları Getir
</button>
<table class="table table-bordered table-striped" style="margin-top:20px;">
<thead>
<tr>
<th>ORAN</th>
<th>ÖDENECEK</th>
<th>ORAN</th>
<th>OYAKTA KALAN</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<button id="clearRows" class="btn btn-danger btn-block">
Tabloyu Temizle
</button>
</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(){
$("#tableBody").empty();
$.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").click(function(){
$("#tableBody").empty();
$(this).prop("disabled", true);
});
$("#loadRows").click(function(){
$("#clearRows").prop("disabled", false);
});
/*
$("#clearRows").click(function(){
$("#tableBody tr").each(function(index){
$(this).delay(index * 150).slideUp(300, function(){
$(this).remove();
});
});
});
$("#clearRows").click(function(){
$("#tableBody tr").each(function(index){
var row = $(this);
setTimeout(function(){
row.addClass("hide-row");
setTimeout(function(){
row.remove();
}, 400);
}, index * 150);
});
});
*/
});
