테이블의 머리글 행 아래에 행을 계단식으로 배열하십시오.

Question

머리글 아래에 행이있는 웹 사이트의 테이블을 만들었습니다. 헤더가 여러 개있을 것입니다. 테이블을 처음 표시 할 때만 헤더를 표시하고 헤더의 버튼을 클릭 할 때만 아래 행을 표시합니다. 이 일을하는 방법이 있습니까? 계단식 테이블을 찾고 있었지만 그 중 하나만 드롭 다운 메뉴를 표시했습니다. 이는 내가 찾고있는 것이 아닙니다. 어떤 도움 (링크, 설명, 코드)도 크게 감사하겠습니다! 아래 표의 표제 중 하나와 다음 표의 일부가 예제입니다. 이 예제로 더 명확히하기 위해 "현재 위치"를 표시하는 행만 표시되고 다음 행 (농촌, 교외, 대도시 - 위치 유형)은 표시되지 않도록 할 수 있습니다. 현재 위치가 클릭되거나 버튼이 클릭됩니다. 위의 유사 HTML을 감안할 때

<table border="1" cellpadding="5%"> 
     <tr><th align=left>Current Location</th></tr> 
     <tr> 
      <td>Rural</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
      </tr> 
     <tr> 
      <td>Suburban</td> 
      <<td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
     <tr> 
      <td>Metropolitan</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 

Answer 1

(나는 colspan 속성을 추가하고, 인라인 (in-line)을 제거하고 사용되지 않는 한 노트, 속성) :

<table> 
    <tbody class="header"> 
     <tr> 
      <td colspan="4"><a href="#demo">Current Location</a> 

      </td> 
     </tr> 
    </tbody> 
    <tbody id="demo"> 
     <tr> 
      <td>Rural</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
     <tr> 
      <td>Suburban</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
     <tr> 
      <td>Metropolitan</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
    </tbody> 
    <tbody class="header"> 
     <tr> 
      <td colspan="4"><a href="#demo2">Another Location</a> 

      </td> 
     </tr> 
    </tbody> 
    <tbody id="demo2"> 
     <tr> 
      <td>Rural</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
     <tr> 
      <td>Suburban</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
     <tr> 
      <td>Metropolitan</td> 
      <td>Total Value</td> 
      <td>Average Value</td> 
      <td>Percentage of total</td> 
     </tr> 
    </tbody> 
</table> 

다음 CSS를 작품 (Chromium 27에서만 테스트 됨) :

table, td { 
    border: 1px solid #000; 
} 
td { 
    padding: 5px; 
} 
/* hides *all* 'tbody' elements: 
*/ 
tbody { 
    display: none; 
} 
/* shows the 'tbody.header' elements: 
*/ 
tbody.header { 
    display: table-row-group; 
} 
/* shows the relevant elements (in those browsers that support ':target'): 
*/ 
tbody:target { 
    display: table-row-group; 
} 

JS Fiddle demo

위의 내용은 id 요소를 사용하여 내용을 함께 그룹화하고 머리글 행의 링크를 id에 연결하는 데 사용됩니다.

불행히도, 나는 당신이 원하는 것처럼 구현하는 다른 JavaScript 대안이 없다고 생각합니다. 그래서 이것은 호환성 문제를 가지고 있지만, 당신이 지정한 html 태그의 제약 하에서 생각할 수있는 가장 좋은 것입니다.