expandir/fechar as linhas da tabela com o JQuery
quero expandir e fechar as linhas da tabela quando forem carregadas as colunas do cabeçalho. Só quero expandir / fechar as linhas que estão sob o cabeçalho específico (clicado).
Aqui está a minha estrutura de mesa:
<table border="0">
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
quaisquer pensamentos sobre como posso realizar esta tarefa. Usar div esta tarefa parece bastante simples, mas eu tenho dados tabulares que eu quero manipular.
uma ideia que me ocorre é usar a classe css em todas as filas que distinguem as linhas sob cada cabeçalho e usar o JQuery para expandir/fechar essas linhas apenas quando o cabeçalho for carregado. Mas se a minha mesa tem 10-15 cabeçalhos, então parece difícil manter o controle das aulas de css.
Por favor, sugira uma forma adequada de o conseguir.7 answers
Dê uma classe say header
às linhas de cabeçalho, use o nextUntil para obter todas as linhas por baixo do cabeçalho carregado até ao próximo cabeçalho.
JS
$('.header').click(function(){
$(this).nextUntil('tr.header').slideToggle(1000);
});
Html
<table border="0">
<tr class="header">
<td colspan="2">Header</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
Demonstração
Outro Exemplo:
$('.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()"
});
Demonstração
Você também pode usar a promessa para comutar o ícone/Texto de calibração, depois de a comutação estar completa, no caso de animação alternancia.
$('.header').click(function () {
var $this = $(this);
$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
$this.find('span').text(function (_, value) {
return value == '-' ? '+' : '-'
});
});
});
Ou apenas com um pseudo elemento css para representar o sinal de expansão/colapso, e apenas comutar uma classe no cabeçalho.
CSS: -
.header .sign:after{
content:"+";
display:inline-block;
}
.header.expand .sign:after{
content:"-";
}
JS: -
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
Demonstração
A maneira mais fácil de conseguir isto, sem alterar a estrutura baseada em HTML table
, é usar um nome de classe nos elementos tr
que contêm um cabeçalho, como .header
, para dar:
<table border="0">
<tr class="header">
<td colspan="2">Header</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<td colspan="2">Header</td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
E o jQuery:
// bind a click-handler to the 'tr' elements with the 'header' class-name:
$('tr.header').click(function(){
/* get all the subsequent 'tr' elements until the next 'tr.header',
set the 'display' property to 'none' (if they're visible), to 'table-row'
if they're not: */
$(this).nextUntil('tr.header').css('display', function(i,v){
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});
Na demonstração ligada, usei o CSS para esconder os elementos tr
que não têm o nome da classe header
; na prática, porém (apesar da raridade relativa dos utilizadores com o JavaScript desactivado), sugiro usar JavaScript para adicionar os nomes de classe relevantes, escondendo e mostrando conforme apropriado:
// hide all 'tr' elements, then filter them to find...
$('tr').hide().filter(function () {
// only those 'tr' elements that have 'td' elements with a 'colspan' attribute:
return $(this).find('td[colspan]').length;
// add the 'header' class to those found 'tr' elements
}).addClass('header')
// set the display of those elements to 'table-row':
.css('display', 'table-row')
// bind the click-handler (as above)
.click(function () {
$(this).nextUntil('tr.header').css('display', function (i, v) {
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});
Referências:
Eu diria que usar o atributo data-
para corresponder os cabeçalhos com os elementos dentro dele. Fiddle: http://jsfiddle.net/GbRAZ/1/
Uma antevisão da alteração em HTML:
<tr class="header" id="header1">
<td colspan="2">Header</td>
</tr>
<tr data-for="header1" style="display:none">
<td>data</td>
<td>data</td>
</tr>
<tr data-for="header1" style="display:none">
<td>data</td>
<td>data</td>
</tr>
Código JS:
$(".header").click(function () {
$("[data-for="+this.id+"]").slideToggle("slow");
});
Editar :
Mas envolve algumas mudanças de HTML. não sei se era isso que querias. Uma maneira melhor de estruturar isso seria usando <th>
ou alterando todo o html para usar ul, ol, etc
ou mesmo uma configuração div > span
.
<table>
<tr class="header">
<td>CARS</td>
</tr>
<tr class="thing">
<td>car</td>
</tr>
<tr class="thing">
<td>truck</td>
</tr>
<tr class="header">
<td>HOUSES</td>
</tr>
<tr class="thing">
<td>split level</td>
</tr>
<tr class="thing">
<td>trailer</td>
</tr>
E aqui está o js.
$('.header').click(function(){
if($(this).hasClass("collapsed")){
$(this).nextUntil('tr.header')
.find('td')
.parent()
.find('td > div')
.slideDown("fast", function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass("collapsed");
} else {
$(this).nextUntil('tr.header')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp("fast");
$(this).addClass("collapsed");
}
});
Veja este violino por exemplo.
https://jsfiddle.net/p9mtqhm7/52/
Expandi uma das respostas, no entanto a minha funcionalidade é um pouco diferente. Na minha versão, diferentes linhas formam diferentes grupos. E a linha "header" despoleta o colapso/expansão desse grupo em particular. Além disso, cada subgrupo individual memoriza o estado em que está. Pode parecer um pouco confuso, podes testar a minha versão usando o jsfiddle. Espero que estes excertos de código sejam úteis a alguém. ali!
HTML
<table border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td class='group1'>Group 1</td>
<td>data 2</td>
</tr>
<tr class='group1'>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td class='group2'>Group 2</td>
<td>data 2</td>
</tr>
<tr class='group2'>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr class='group2'>
<td class='sub_group1'>Sub Group 1</td>
<td>data 6</td>
</tr>
<tr class='group2 sub_group1'>
<td>data 7</td>
<td>data 8</td>
</tr>
<tr class='group2 sub_group1'>
<td>data 9</td>
<td>data 10</td>
</tr>
<tr class='group2 sub_group1'>
<td class='sub_sub_group1'>Sub Sub Group 1</td>
<td>data 11</td>
</tr>
<tr class='group2 sub_group1 sub_sub_group1'>
<td>data 12</td>
<td>data 13</td>
</tr>
<tr class='group2 sub_group1 sub_sub_group1'>
<td>data 14</td>
<td>data 15</td>
</tr>
<tr class='group2'>
<td class='sub_group2'>Sub Group 2</td>
<td>data 11</td>
</tr>
<tr class='group2 sub_group2'>
<td>data 12</td>
<td>data 13</td>
</tr>
<tr class='group2 sub_group2'>
<td>data 14</td>
<td>data 15</td>
</tr>
</table>
CSS
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
img.button_open{
content:url('http://code.stephenmorley.org/javascript/collapsible-lists/button-open.png');
cursor:pointer;
}
img.button_closed{
content: url('http://code.stephenmorley.org/javascript/collapsible-lists/button-closed.png');
cursor:pointer;
}
JS
function CreateGroup(group_name)
{
// Create Button(Image)
$('td.' + group_name).prepend("<img class='" + group_name + " button_closed'> ");
// Add Padding to Data
$('tr.' + group_name).each(function () {
var first_td = $(this).children('td').first();
var padding_left = parseInt($(first_td).css('padding-left'));
$(first_td).css('padding-left', String(padding_left + 25) + 'px');
});
RestoreGroup(group_name);
// Tie toggle function to the button
$('img.' + group_name).click(function(){
ToggleGroup(group_name);
});
}
function ToggleGroup(group_name)
{
ToggleButton($('img.' + group_name));
RestoreGroup(group_name);
}
function RestoreGroup(group_name)
{
if ($('img.' + group_name).hasClass('button_open'))
{
// Open everything
$('tr.' + group_name).show();
// Close subgroups that been closed
$('tr.' + group_name).find('img.button_closed').each(function () {
sub_group_name = $(this).attr('class').split(/\s+/)[0];
//console.log(sub_group_name);
RestoreGroup(sub_group_name);
});
}
if ($('img.' + group_name).hasClass('button_closed'))
{
// Close everything
$('tr.' + group_name).hide();
}
}
function ToggleButton(button)
{
$(button).toggleClass('button_open');
$(button).toggleClass('button_closed');
}
CreateGroup('group1');
CreateGroup('group2');
CreateGroup('sub_group1');
CreateGroup('sub_group2');
CreateGroup('sub_sub_group1');
$('YOUR CLASS SELECTOR').click(function(){
$(this).toggle();
});
Um acordeão JavaScript faz o truque.
Este fiddle de W3Schools faz uma tarefa simples ainda mais simples usando nada além de javascript, que eu reproduzo parcialmente abaixo.
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
font-size: 15px;
cursor: pointer;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
</style>
</head><body>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
...
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet</p>
</div>
...
<button class="accordion">Table</button>
<div class="panel">
<p><table name="detail_table">...</table></p>
</div>
...
<button class="accordion"><table name="button_table">...</table></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet</p>
<table name="detail_table">...</table>
<img src=...></img>
</div>
...
</body></html>
Se usar o php, não se esqueça de converter "
para '
. Você também pode usar tabelas de dados dentro do botão e ele ainda vai funcionar.