Tabel dengan fitur berjalan dari atas ke bawah atau dari bawah ke atas seringkali kita jumpai dimana mana seperti papan informasi kantor, bandara, bank, dan lain-lain. Sebagai pengembang web atau aplikasi tentu kita memerlukan trik seperti ini bukan ? nah berikut adalah script yang bisa anda gunakan untuk membuat sebuah tabel tampil berjalan dari baris bawah ke atas atau sebaliknya. berikut adalah script nya :
<html>
<head>
<title>Membuat tabel berjalan</title>
<style>
.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
</style>
<script>
var $el = $(".table-responsive");
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight")-$el.innerHeight();
$el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
$el.stop();
}
anim();
$el.hover(stop, anim);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr><th>No</th><th>Nama</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Alex Mahandari</td></tr>
<tr><td>2</td><td>Imam Munandar</td></tr>
<tr><td>3</td><td>Oman</td></tr>
<tr><td>4</td><td>Rifki Azhar</td></tr>
<tr><td>5</td><td>Kusuma Atmaja</td></tr>
<tr><td>6</td><td>Ayu Wulansari</td></tr>
<tr><td>7</td><td>Yeyen Martini</td></tr>
<tr><td>8</td><td>Toim</td></tr>
<tr><td>9</td><td>Candra Daniel</td></tr>
<tr><td>10</td><td>Wisnu Gunawan</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Maka outputnya adalah seperti gambar berikut :
Silahkan Lihat Demo Di sini
Untuk tabel berjalan jenis kedua dapat anda cek pada artikel saya selanjutnya yaitu :
Membuat Tabel Berjalan HTML, PHP, JAVASCRIPT PART 2
Selamat mencoba ! terimakasih. Jika membutuhkan sistem informasi atau ingin melakukan pemesanan sistem atau sekedar bertanya silahkan hubungi kontak berikut :
