Membuat Tabel Berjalan HTML, PHP, JAVASCRIPT #Part1

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 :

Related posts