toggle bei tabellen

Toggle Spalten in Tabelle

Der hier verwendete Code

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>untitled</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('.aopen').click(function () { const aid = $(this).data('a'); ao_toggeln(aid) $(this).parent().parent().find('.chead[data-album-id="'+aid+'"]').each(function(u){ $('[data-'+alb+'-cd-id]').toggle(); console.log('CD '+aid+' ist '+$(this).attr('data-close')); const alb = $(this).data('album-id'); if($(this).attr('data-close')==1){ //const cid = $(this).data('c'); console.log('ist zu '+alb); // $('[data-'+alb+'-cd-id]').css('display','none'); $(this).css('background','blue') }else{ // if($(this).attr('data-close')==2){ console.log('ist offen '+alb); $(this).css('background','black') $('[data-'+alb+'-cd-id]').css('background','black') // $('[data-'+alb+'-cd-id]').css('display','table-row'); } }) }); $('.copen').click(function () { var ifclose=$(this).parent(); const alb = $(this).parent().data('album-id'); const cid = $(this).data('c'); $('[data-'+alb+'-cd-id="' + cid + '"]').toggle(); if(ifclose.attr('data-close')==1){ ifclose.attr('data-close',2); }else{ ifclose.attr('data-close',1); } }) function ao_toggeln(aid){ $('[data-album-id="' + aid + '"]').toggle(); } }) </script> <style> tr.chead { display: none; } tr[data-a1-cd-id], tr[data-a2-cd-id], tr[data-a3-cd-id]{ display: none; } .green{ background:lightgreen; } table,td{ border:1px solid black; } thead{ background:lightblue; } .chead{ background:rgba(255,0,0,0.5); } </style> </head> <body> <table> <thead> <tr> <th>Lft Nr</th> <th colspan="3">Name der CD</th> </tr> </thead> <tbody> <tr class="green"> <td class="aopen" data-a="a1">01</th> <td colspan="3">100 Rock Hits - The Sound of my Life</th> </tr> <tr class="chead" data-album-id="a1" data-close="1"> <td class="copen" data-c="c1">cd1</td> <td>Interpret</td> <td>Titel</td> <td>Zeit</td> </tr> <tr data-a1-cd-id="c1" class="c"> <td>01.</td> <td>Golden Earring</td> <td>Radar Love</td> <td>05:05</td> </tr> <tr data-a1-cd-id="c1"> <td>02.</td> <td>Heart</td> <td>Barracuda</td> <td>04:24</td> </tr> <tr data-a1-cd-id="c1"> <td>03.</td> <td>Judas Priest</td> <td>Living After Midnight</td> <td>03:31</td> </tr> <tr data-a1-cd-id="c1"> <td>04.</td> <td>Alice Cooper</td> <td>No More Mr. Nice Guy</td> <td>03:07</td> </tr> <tr class="chead" data-album-id="a1" data-close="1"> <td class="copen" data-c="c2">cd2</td> <td>Interpret</td> <td>Titel</td> <td>Zeit</td> </tr> <tr data-a1-cd-id="c2" class="c"> <td>01.</td> <td>Golden Earring</td> <td>Radar Love</td> <td>05:05</td> </tr> <tr data-a1-cd-id="c2"> <td>02.</td> <td>Heart</td> <td>Barracuda</td> <td>04:24</td> </tr> <tr data-a1-cd-id="c2"> <td>03.</td> <td>Judas Priest</td> <td>Living After Midnight</td> <td>03:31</td> </tr> <tr data-a1-cd-id="c2"> <td>04.</td> <td>Alice Cooper</td> <td>No More Mr. Nice Guy</td> <td>03:07</td> </tr> <tr class="green"> <td class="aopen" data-a="a2">02</th> <td colspan="3">22 hip hop classiker</th> </tr> <tr class="chead" data-album-id="a2" data-close="1"> <td class="copen" data-c="c1">cd1</td> <td>Interpret</td> <td>Titel</td> <td>Zeit</td> </tr> <tr data-a2-cd-id="c1" class="c"> <td>01.</td> <td>Golden Earring</td> <td>Radar Love</td> <td>05:05</td> </tr> <tr data-a2-cd-id="c1"> <td>02.</td> <td>Heart</td> <td>Barracuda</td> <td>04:24</td> </tr> <tr data-a2-cd-id="c1"> <td>03.</td> <td>Judas Priest</td> <td>Living After Midnight</td> <td>03:31</td> </tr> <tr data-a2-cd-id="c1"> <td>04.</td> <td>Alice Cooper</td> <td>No More Mr. Nice Guy</td> <td>03:07</td> </tr> <tr class="chead" data-album-id="a2" data-close="1"> <td class="copen" data-c="c2">cd2</td> <td>Interpret</td> <td>Titel</td> <td>Zeit</td> </tr> <tr data-a2-cd-id="c2" class="c"> <td>01.</td> <td>Golden Earring</td> <td>Radar Love</td> <td>05:05</td> </tr> <tr data-a2-cd-id="c2"> <td>02.</td> <td>Heart</td> <td>Barracuda</td> <td>04:24</td> </tr> <tr data-a2-cd-id="c2"> <td>03.</td> <td>Judas Priest</td> <td>Living After Midnight</td> <td>03:31</td> </tr> <tr data-a2-cd-id="c2"> <td>04.</td> <td>Alice Cooper</td> <td>No More Mr. Nice Guy</td> <td>03:07</td> </tr> <tr class="green"> <td class="aopen" data-a="a3">03</th> <td colspan="3">irgendein anderer schund </th> </tr> <tr class="chead" data-album-id="a3" data-close="1"> <td class="copen" data-c="c1">cd1</td> <td>Interpret</td> <td>Titel</td> <td>Zeit</td> </tr> <tr data-a3-cd-id="c1" class="c"> <td>01.</td> <td>Golden Earring</td> <td>Radar Love</td> <td>05:05</td> </tr> <tr data-a3-cd-id="c1"> <td>02.</td> <td>Heart</td> <td>Barracuda</td> <td>04:24</td> </tr> <tr data-a3-cd-id="c1"> <td>03.</td> <td>Judas Priest</td> <td>Living After Midnight</td> <td>03:31</td> </tr> <tr data-a3-cd-id="c1"> <td>04.</td> <td>Alice Cooper</td> <td>No More Mr. Nice Guy</td> <td>03:07</td> </tr> <tr class="chead" data-album-id="a3" data-close="1"> <td class="copen" data-c="c2">cd2</td> <td>Interpret</td> <td>Titel</td> <td>Zeit</td> </tr> <tr data-a3-cd-id="c2" class="c"> <td>01.</td> <td>Golden Earring</td> <td>Radar Love</td> <td>05:05</td> </tr> <tr data-a3-cd-id="c2"> <td>02.</td> <td>Heart</td> <td>Barracuda</td> <td>04:24</td> </tr> <tr data-a3-cd-id="c2"> <td>03.</td> <td>Judas Priest</td> <td>Living After Midnight</td> <td>03:31</td> </tr> <tr data-a3-cd-id="c2"> <td>04.</td> <td>Alice Cooper</td> <td>No More Mr. Nice Guy</td> <td>03:07</td> </tr> </tbody> </table> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!