테이블 행을 확장하고 접을 필요가 있습니다.

이 사이트의 답변에서 다음 코드를 얻었습니다. 다음 JQuery 코드를 사용하면 기본적으로 테이블 행이 축소 된 다음 '표제 ID'를 클릭하여 테이블을 확장 할 수 있습니다. 그러나 제목 ID를 다시 클릭하면 행이 접히지 않습니다. 그렇게하기 위해이 코드에 뭔가를 추가해야합니다. 가능한 경우 사용자가 제목 ID 자체 대신 클릭 할 수있는 + 및 - 아이콘을 추가하고 싶습니다. 누구든지 도와 줄 수 있습니까?테이블 행을 확장하고 접을 필요가 있습니다.

<!DOCTYPE html> 

    <head> 
     <title>Master Vocab List</title> 

      <script type="text/javascript" src="jquery.js"> 
      </script> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 
        $("#collapse").hide(); 
        $("#collapse1").hide(); 
        $("#collapse2").hide(); 
        $("#collapse3").hide(); 
        $("#collapse4").hide(); 
        $("#collapse5").hide(); 
        $("#collapse6").hide(); 
        $("#collapse7").hide(); 
        $("#collapse8").hide(); 

       }); 


       $("#heading").click(function(){     
        $("#collapse").show(); 
        $("#collapse1").show(); 
        $("#collapse2").show(); 
        $("#collapse3").show(); 
        $("#collapse4").show(); 
        $("#collapse5").show(); 
        $("#collapse6").show(); 
        $("#collapse7").show(); 
        $("#collapse8").show(); 



       }); 
      </script>

<table> 
     <tr> 
      <td id="heading" colspan = "2"><b>Connectors and 
      Transitions</b></td> 
     </tr> 
     <tr id="collapse"> 
      <td>primero</td> 
      <td>first</td> 
     </tr> 
     <tr id="collapse1"> 
      <td>después</td> 
      <td>afterwards</td> 
     </tr> 
     <tr id="collapse2"> 
      <td>pero</td> 
      <td>but</td> 
     </tr> 
     <tr id="collapse3"> 
      <td>y</td> 
      <td>and</td> 
     </tr> 
     <tr id="collapse4"> 
      <td>luego</td> 
      <td>afterwards</td> 
     </tr> 
     <tr id="collapse5"> 
      <td>antes</td> 
      <td>beforehand</td> 
     </tr> 
     <tr id="collapse6"> 
      <td>finalmente</td> 
      <td>finally</td> 
     </tr> 
     <tr id="collapse7"> 
      <td>por ejemplo</td> 
      <td>for example</td> 
     </tr> 
     <tr id="collapse8"> 
      <td>mientras</td> 
      <td>while</td> 
     </tr> 
    </table>`

출처

2017-12-21 Skins fan

당신은 단지 추가하고 이미지 나 글꼴 멋진 아이콘과 +를 달성하기 위해 새로운 요소에 제목에서 Id 속성을 이동할 수 있습니다. 그런 다음 .show를 호출하는 대신 코드에서 .toggle을 실행하십시오. –

정보를 제공해 주셔서 감사합니다. 위대한 작품! –

당신은 당신이 목표는 궁극적 무슨 말을하지 않는, 그래서 두 개의 열, 첫 번째 행이있는 테이블은 당신이 가지고있는 예를 (사용하여 질문에 대답합니다 제목으로 표시).

각 행에 ID를 추가하는 것은 지루합니다. 너는 DOM 탐색을 사용하여 너의 돈을 위해 더 많은 것을 얻을 것이다.

jQuery를

$(document).ready(function() { 
    //find all rows after the first row and hide them 
    $('table').find('tr:gt(0)').hide(); 
    //add a class to track expanded/collapsed (for CSS styling) 
    $('#heading').addClass('hCollapsed'); 


    $("#heading").click(function() { 
    //#heading is a cell, so go up to the parent, which is the first tr. Toggle the hide/show status of those rows. 
    $(this).parent().siblings().toggle(); 
    //then adjust the classes accordingly (for CSS styling) 
    if ($(this).hasClass('hCollapsed')) { 
     $(this).removeClass('hCollapsed').addClass('hExpanded'); 
    } else { 
     $(this).removeClass('hExpanded').addClass('hCollapsed'); 
    } 

    }); 
});

을 그리고, 간단한 솔루션으로, 당신은 + 또는 추가 CSS를 사용할 수 있습니다 : - 따라서, 귀하의 경우, 당신은 할 수 있습니다.

CSS

.hCollapsed::before { 
    content: "+ "; 
} 

.hExpanded::before { 
    content: "- "; 
} 

#heading { 
    cursor: pointer; 
}

바이올린 데모 : https://jsfiddle.net/zephyr_hex/cwtd2g18/

출처

2017-12-21 23:11:28

대단하군요! 정말 고맙습니다! 나는 기본적으로 다른 제목 아래에 그룹화 된 어휘 단어 목록을 많이 가지고 있으므로이 코드를 여러 제목에 적용하고 정리가 가능한 프레젠테이션을 위해 모두 접을 수있게 할 것입니다. 다시 한번 감사드립니다. –

테이블 행을 확장하고 접을 필요가 있습니다.

답변

관련 문제