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>