script tabel responsif

Artikel

Berita Terupdate

Baca Selengkapnya

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.

1. 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.
2. 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.
3. Harap perhatikan bahwa kelas 'tab1', 'tab1', 'cs1', 'cs2', 'csp3, dan' csp4 'hanya untuk kode Javascript.
4. 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

1. Istillah-istilah dan Defenisi yang digunakan dalam RDTR dan PZ Kawasan Prioritas
2. Cara membuat Artikel Berkualitas