JQuery로 테이블 행 확장 / 축소

JQuery로 테이블 행 확장 / 축소

---

헤더 열을 클릭 할 때 표 행을 확장 및 축소하고 싶습니다. 특정 헤더 아래에있는 행만 확장 / 축소하고 싶습니다 (클릭).

내 테이블 구조는 다음과 같습니다.

 <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>

이 작업을 어떻게 수행 할 수 있는지에 대한 모든 생각. div를 사용하면이 작업은 매우 간단 해 보이지만 조작하고 싶은 표 형식의 데이터가 있습니다.

내가 생각할 수있는 한 가지 아이디어는 각 헤더 아래의 행을 구별하는 모든 행에서 CSS 클래스를 사용하고 헤더를 클릭 할 때만 해당 행을 확장 / 축소하기 위해 JQuery를 사용하는 것입니다. 그러나 내 테이블에 10-15 개의 헤더가 있으면 CSS 클래스를 추적하기가 어려워 보입니다.

이를 달성하기위한 적절한 방법을 제안하십시오.

---

이 방법으로 시도 할 수 있습니다.

클래스 header에 헤더 행을 말하고 nextUntil을 사용하여 다음 헤더까지 클릭 된 헤더 아래의 모든 행을 가져옵니다.

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>

데모

또 다른 예:

$('.header').click(function(){
   $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()"
});

데모

애니메이션 토글의 경우 토글이 완료된 후 promise를 사용하여 범위 아이콘 / 텍스트를 토글 할 수도 있습니다.

$('.header').click(function () {
    var $this = $(this);
    $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
        $this.find('span').text(function (_, value) {
            return value == '-' ? '+' : '-'
        });
    });
});

.약속()

.slideToggle ()

또는 CSS 의사 요소를 사용하여 확장 / 축소 기호를 나타내고 헤더에서 클래스를 토글합니다.

CSS :-

.header .sign:after{
  content:"+";
  display:inline-block;      
}
.header.expand .sign:after{
  content:"-";
}

JS :-

$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);

데모

---

HTML table기반 구조 를 변경하지 않고이를 달성하는 가장 쉬운 방법 은 다음 tr과 같이 헤더를 포함하는 요소 에 클래스 이름을 사용하는 것입니다 .header.

<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>

그리고 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';
    });
});

JS Fiddle 데모 .

링크 된 데모에서는 CSS를 사용 하여 클래스 이름 이없는tr 요소 를 숨겼습니다 . 실제로 (자바 스크립트가 비활성화 된 사용자의 상대적인 희소성에도 불구하고) JavaScript를 사용하여 관련 클래스 이름을 추가하고 적절하게 숨기고 표시하는 것이 좋습니다.header

// 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';
    });
});

JS Fiddle 데모 .

참조 :

• addClass().
• click().
• css().
• filter().
• find().
• hide().
• nextUntil().

---

제공된 가장 간단한 대답이 마음에 들었습니다. 그러나 나는 무너지는 것의 고르지 않은 것을 좋아하지 않았다. 그래서이 질문에 대한 해결책을 결합했습니다 . 테이블 행에서 slideDown (또는 show) 함수를 사용하는 방법? 행이 위나 아래로 미끄러질 때 더 부드러운 애니메이션을 만듭니다. div에서 각 td의 내용을 래핑해야합니다. 이렇게하면 축소되는 애니메이션을 부드럽게 만들 수 있습니다. 행이 확장되면 div가 콘텐츠로만 바뀝니다.

그래서 여기에 html이 있습니다 :

<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>

그리고 여기 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");
}
});

이 바이올린을 확인하십시오 https://jsfiddle.net/p9mtqhm7/52/

---

data-헤더를 내부 요소와 일치시키기 위해 속성을 사용한다고 말할 것입니다. 바이올린 : http://jsfiddle.net/GbRAZ/1/

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>

JS 코드 :

$(".header").click(function () {
   $("[data-for="+this.id+"]").slideToggle("slow");
});

편집 : 그러나 일부 HTML 변경이 포함됩니다. 그래서 그게 당신이 원하는 것인지 모르겠습니다. 이를 구조화하는 더 좋은 방법은 사용 <th>하거나 전체 html을 사용 ul, ol, etc하거나 div > span설정 을 변경하는 것 입니다.

---

답변 중 하나를 확장했지만 기능이 약간 다릅니다. 내 버전에서는 서로 다른 행이 서로 다른 그룹을 형성합니다. 그리고 "헤더"행은 특정 그룹의 축소 / 확장을 트리거합니다. 또한 각 개별 하위 그룹은 해당 상태를 기억합니다. 약간 혼란 스러울 수 있습니다. jsfiddle을 사용하여 내 버전을 테스트 할 수 있습니다. 이 코드가 누군가에게 도움이되기를 바랍니다!

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');

데모

---

JavaScript 아코디언 이 트릭을 수행합니다.

This fiddle by W3Schools makes a simple task even more simple using nothing but javascript, which i partially reproduce below.

<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>

if using php, don't forget to convert " to '. You can also use tables of data inside the button and it will still work.

---

using jQuery it's easy...

 $('YOUR CLASS SELECTOR').click(function(){

            $(this).toggle();
});

참고URL : https://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery