Membuat Responsive Tabel Menggunakan JQuery

Di kesempatan kali ini kita akan belajar bagaimana cara merancang Membangun Memiliki tampilan yang dinamis Tabel Menggunakan JQuery. Tentu tampilan situs secara memiliki tampilan yang dinamis amat urgen, karena akan menambahkan kesan bagus untuk para penikmatnya. Pada kasus ini kita membahas mengenai tabel secara memiliki tampilan yang dinamis.



Pada artikel ini kita akan merancang isi data pada tabel disembunyikan lalu ada icon arrow bagi menampilkan kembali datanya. Baiklah bagaimana cara membuatnya yuk mari simak strategi dibawah ini:



Langkah pertama-tama



Sobat coba bikin struktur html yang berisikan code dibawah ini



 class=prettyprint lang-html><!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Membangun Memiliki tampilan yang dinamis Tabel Menggunakan jQuery</title>
<link rel=stylesheet href=style.css>
<link rel=stylesheet href=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>
</head>
<body>


ini code di bagian head berisi library fontawesome bagi menampilkan icon-icon, library jQuery dan style CSS.



<div class=container>
<table class=wrap excol >
<caption class=title>Memiliki tampilan yang dinamis Tabel Menggunakan jQuery</caption>
<thead>
<tr>
<th scope=col class=column-primary>Nama</th>
<th scope=col>Domisili</th>
<th scope=col>No.HP</th>
<th scope=col>Email</th>
<th scope=col class=column-primary>Opsi</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header=Nama class=title>Tanto<a href=# class=more><i class=fa fa-chevron-down></i></a></td>
<td data-header=Domisili >Jakarta</td>
<td data-header=No.HP >08958080xxx</td>
<td data-header=Email >tanto@ngemil.com</td>
<th scope=row>
<div class=toolbox>
<a href=# class=modifikasi><i class=fa fa-pencil-square-o></i></a>
<a href=# class=remove><i class=fa fa-close></i></a>
</div>
</th>
</tr>
<tr>
<td data-header=Nama class=title>Isman<a href=# class=more><i class=fa fa-chevron-down></i></a></td>
<td data-header=Domisili >Bogor</td>
<td data-header=No.HP >08575151xxx</td>
<td data-header=Email >isman@ngemil.com</td>
<th scope=row>
<div class=toolbox>
<a href=# class=modifikasi><i class=fa fa-pencil-square-o></i></a>
<a href=# class=remove><i class=fa fa-close></i></a>
</div>
</th>
</tr>
<tr>
<td data-header=Nama class=title>Safi<a href=# class=more><i class=fa fa-chevron-down></i></a></td>
<td data-header=Domisili >Parung</td>
<td data-header=No.HP >08127070xxx</td>
<td data-header=Email >safi@ngemil.com</td>
<th scope=row>
<div class=toolbox>
<a href=# class=modifikasi><i class=fa fa-pencil-square-o></i></a>
<a href=# class=remove><i class=fa fa-close></i></a>
</div>
</th>
</tr>
<tr>
<td data-header=Nama class=title>Didi<a href=# class=more><i class=fa fa-chevron-down></i></a></td>
<td data-header=Domisili >Bandung</td>
<td data-header=No.HP >08112020xxx</td>
<td data-header=Email >dean@ngemil.com</td>
<th scope=row>
<div class=toolbox>
<a href=# class=modifikasi><i class=fa fa-pencil-square-o></i></a>
<a href=# class=remove><i class=fa fa-close></i></a>
</div>
</th>
</tr>
<tr>
<td data-header=Nama class=title>Syahril<a href=# class=more><i class=fa fa-chevron-down></i></a></td>
<td data-header=Domisili >Medan</td>
<td data-header=No.HP >08136060xxx</td>
<td data-header=Email >syahril@ngemil.com</td>
<th scope=row>
<div class=toolbox>
<a href=# class=modifikasi><i class=fa fa-pencil-square-o></i></a>
<a href=# class=remove><i class=fa fa-close></i></a>
</div>
</th>
</tr>
</tbody>
</table>
</div>


di code diatas adalah tampilan table berisi beberapa data yang dimanfaatkan, dan berikutnya berikan style CSS seperti code dibawah ini



h3 {   
   margin: 25px auto 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
}
/* Style utk table */
table {
    margin: auto;
    font-family: Lucida Sans Unicode, Lucida Grande, Segoe Ui;
    font-size: 12px;

}
.wrap {
border-collapse: collapse;
font-size: 13px;
}
.wrap th, 
.wrap td {
border: 1px solid #46ae3e;
border-top: 0;
border-right: 0;
padding: 7px 17px;
}
.wrap th, 
.wrap td:last-child {
border-right: 1px solid #46ae3e;
}
caption.title {
caption-side: top;
margin:20px 0 10px 0;
font-weight: 800;
}

/* Style utk table header */
.wrap thead th {
background-color: #0ca046;
color: #FFFFFF;
border-color: #0ca046 !important;
text-transform: uppercase;
}

/* Style utk table body */
.wrap tbody td {
color: #353535;
position: relative;
white-space: nowrap;
}

.wrap tbody tr:nth-child(odd) {
background-color: #bcffef;
}
.wrap tbody tr:hover th,
.wrap tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
.wrap tbody td:empty
{
background-color: #ffcccc;
}

a.remove {
color: red;
font-size: 23px;
float: left;
}

a.remove {
line-height: 0.1;
}

a.modifikasi {
color: #35b103;
margin-right: 5px;
font-size: 20px;
float: left;
}

.toolbox {
width: 45px;
}
a.more {
color: #717171;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 10px;
display: none;
}

.table-container {
overflow: auto;
}

@media screen and (max-width: 520px) {
table.memiliki tampilan yang dinamis {
width: 100%;
}
.excol .more {
display: block;
}
.excol thead th.column-primary {
width: 100%;
}

.excol thead th:not(.column-primary) {
display:none;
}

.excol th[scope=row] {
vertical-align: top;
}

.excol td {
display: block;
width: auto;
}

.excol td:nth-child(n+2)::before {
float: left;
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
width: 80px;
}

.excol .expanded td:nth-child(n+2) {
display: block;

}

.excol td:nth-child(n+2) {
display: none;
}

a.remove, a.remove i {
line-height: 0.7;
}
a.remove {
font-size: 20px;
}

a.modifikasi {
font-size: 18px;
line-height: 0;
}
}


Jangan lupa bagi menambahkan code script dari jQuery yang menampilkan efek expand dan collapse,dan coba ketikkan code dibawah ini



$(document).ready(function() {
$('a.more').click(function() {

//  ini bagian toggle class
$tr = $(this).parent().parent();
$tr.toggleClass('expanded');

// tampilkan - sembunyikan baris
$i = $(this).children('i');
$i.removeClass('fa-chevron-down', 'fa-chevron-up');
var arrow = $tr.hasClass('expanded') ? 'fa-chevron-up' : 'fa-chevron-down';
$i.addClass(arrow);

return false;
});
})


kini simpan code-code diatas kemudian jalankan di browser masing-masing ,seandainya benar akan seperti tampilan dibawah ini:



Pada



Demikian pembahasan artikel ini mengenai Membangun Memiliki tampilan yang dinamis Tabel Menggunakan JQuery, selamat mencoba dan hingga jumpa.



terima kasih.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more