<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 ---------->
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Efektli Table Append</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</div>
</body>
</html>
@keyframes drop {
from {
opacity:0;
transform: translateY(-20px);
}
to {
opacity:1;
transform: translateY(0);
}
}
.show-row {
opacity: 0;
animation: drop 0.5s 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>");
newRow.append("<td>"+item.o1+"</td>");
newRow.append("<td>"+item.odenecek+"</td>");
newRow.append("<td>"+item.o2+"</td>");
newRow.append("<td>"+item.kalan+"</td>");
newRow.hide().appendTo("#tableBody")
.delay(index * 200)
.slideDown(300);
});
});
});
