

script tabel responsif
Jumlah
Shipping Region
Read more
Spesifikasi
Kategori | Artikel |
---|---|
ID Produk | 171678999609505389 |
Deskripsi
Berita Terupdate
Detail Berita : Dapatkan kode Javascript, CSS dan HTML untuk Tabel Responsif? | |
Sembunyikan sejumlah kolom Lebar kolom tersembunyi didistribusikan di kolom yang terlihat. Javascript dengan JQuery dan CSS diperlukan. |
- Ini sebenarnya adalah satu set dua tabel. Tabel utama (kelas tab2) terlihat di layar kecil dan besar. Namun, tabel lain (class = tabl) berisi tombol untuk Tampilkan / Sembunyikan kolom yang hanya terlihat di layar kecil.
- Tabel ini mendukung penggabungan kolom 'colspan = 2' dan 'colspan = 3' dan juga penggabungan fitur rowpan = 2 'dalam elemen' th '. Skrip dapat disesuaikan untuk menggabungkan lebih dari 3 kolom.
- Harap perhatikan bahwa kelas 'tab1', 'tab1', 'cs1', 'cs2', 'csp3, dan' csp4 'hanya untuk kode Javascript.
- Perhatikan tabel dibawah ini tabel versi pc dan gadget:
Hide / Show Columns | ||||||||
---|---|---|---|---|---|---|---|---|
Col. 1 | Col. 2 + 3 | 4 | Col. 5 + 6 + 7 | Col. 8 |
Col. 1 | Col. 2 + 3 | Column 4 | Col. 5 + 6 + 7 | Col. 8 | |||
---|---|---|---|---|---|---|---|
Col. 2 | Col. 3 | Col. 5 | Col. 6 | Col. 7 | |||
TD-11 | TD-12 | TD-13 | TD-14 | TD-15 | TD-16 | TD-17 | TD-18 |
TD-21 | TD-22 | TD-23 | TD-24 | TD-25 | TD-26 | TD-27 | TD-28 |
TD-31 | TD-32 | TD-33 | TD-34 | TD-35 | TD-36 | TD-37 | TD-38 |
TD-41 | TD-42 | TD-43 | TD-44 | TD-45 | TD-46 | TD-47 | TD-48 |
TD-51 | TD-52 | TD-53 | TD-54 | TD-55 | TD-56 | TD-57 | TD-58 |
Copy html scripnya.
<!-- CSS of above Demo table -->
<style>
@media screen and (max-width:639px){.dnm{display:none}}
@media screen and (min-width:640px){.dm{display:none}}
@media all{
.s{font-size:85%}.ac{text-align:center}
table{width:100%;border-collapse:collapse;box-shadow:0 1px 2px #888;}
td,th{vertical-align:top;border:1px solid #ddd}.ac{align:center}
.w10{width:10%}}
</style>
<!-- Javascript of above Demo table ( You may replace 'jQuery' with '$' sign in the script code below, if you are not using '$' sign in other scripts on your site. ) -->
<script>
jQuery(document).ready(function(){
jQuery(document).on("click",".tab1 tr button",function(){jQuery(this).text(jQuery(this).text() == "Show" ? "Hide" : "Show");});
//-- Responsive table2
jQuery(document).on("click",".tab1 tr button",function(){var index0 = jQuery(this).parent().index();var index1 = jQuery(this).val()*1-1*1;var colspan=jQuery(this).parent().attr("colspan");if (colspan >= 2){colspan=colspan} else colspan=1;var className=jQuery(this).parent().attr("class");var txt=jQuery(this).html();var i; for (i=1;i<=colspan;i++){jQuery(".tab2 tr").each(function(){
if(txt=="Show") {if(className=="cs1"){jQuery(this).find(".th").eq(index0).hide();jQuery(".csp1").hide();jQuery(this).find("td").eq(index1 + (i-1)).hide();}
else if(className=="cs2"){jQuery(this).find(".th").eq(index0).hide();jQuery(".csp2").hide();jQuery(this).find("td").eq(index1 + (i-1)).hide();}
else if(className=="cs3"){jQuery(this).find(".th").eq(index0).hide();jQuery(".csp3").hide();jQuery(".csp3").hide();jQuery(this).find("td").eq(index1 + (i-1)).hide();}
else {jQuery(this).find(".th").eq(index0).hide();jQuery(this).find("td").eq(index1 + (i-1)).hide();}return;}
{if(className=="cs1"){jQuery(this).find(".th").eq(index0).show();jQuery(".csp1").show();jQuery(this).find("td").eq(index1 + (i-1)).show();}
else if(className=="cs2"){jQuery(this).find(".th").eq(index0).show();jQuery(".csp2").show();jQuery(this).find("td").eq(index1 + (i-1)).show();}
else if(className=="cs3"){jQuery(this).find(".th").eq(index0).show();jQuery(".csp3").show();jQuery(this).find("td").eq(index1 + (i-1)).show();}
else {jQuery(this).find(".th").eq(index0).show();jQuery(this).find("td").eq(index1 + (i-1)).show();}} }); } });});
</script>
<!-- HTM of above Demo table -->
<table class='tab1 dm s'>
<tr class="ac"><th colspan="9">Hide / Show Columns
<tr class="ac">
<th rowspan="2">Col. 1<button type="button" value="1">Hide</button>
<th colspan="2" class='cs1'>Col. 2 + 3<button type="button" value="2">Hide</button>
<th rowspan="2">4<button type="button" value="3">Hide</button>
<th colspan="3" class="cs2">Col. 5 + 6 + 7<button type="button" value="6">Hide</button>
<th rowspan="2">Col. 8<button type="button" value="1">Hide</button>
</table>
<table class='tab2 ac'><col class=w12 span=8>
<tr><th rowspan=2 class=th>Col. 1<th colspan=2 class=th>Col. 2 + 3<th rowspan=2 class=th>Column 4<th colspan=3 class=th>Col. 5 + 6 + 7<th rowspan=2 class=th>Col. 8
<tr><th class='csp1'>Col. 2<th class='csp1'>Col. 3<th class='csp2'>Col. 5<th class='csp2'>Col. 6<th class='csp2'>Col. 7
<tr><td>TD-11<td>TD-12<td>TD-13<td>TD-14<td>TD-15<td>TD-16<td>TD-17<td>TD-18
<tr><td>TD-21<td>TD-22<td>TD-23<td>TD-24<td>TD-25<td>TD-26<td>TD-27<td>TD-28
<tr><td>TD-31<td>TD-32<td>TD-33<td>TD-34<td>TD-35<td>TD-36<td>TD-37<td>TD-38
<tr><td>TD-41<td>TD-42<td>TD-43<td>TD-44<td>TD-45<td>TD-46<td>TD-47<td>TD-48
<tr><td>TD-51<td>TD-52<td>TD-53<td>TD-54<td>TD-55<td>TD-56<td>TD-57<td>TD-58
</table>
Info Syarat Ketentuan Konten ini :
Uji tuntas dilakukan dalam bentuk kompilasi. Namun, kesalahan / kelalaian yang tidak disengaja tidak dikesampingkan. Situs ini tidak mengklaim bahwa konten/formulir/data yang tersedia untuk diunduh/copy secara gratis adalah benar dan / atau mutakhir. Silakan unduh dan gunakan formulir dengan risiko dan tanggung jawab Anda sendiri. Situs ini tidak akan bertanggung jawab atas kehilangan atau kerusakan yang disebabkan / timbul pada orang atau orang atau badan mana pun dengan menggunakan formulir yang diunduh dari situs ini
Read more
Sembunyikan