HTML 테이블이 숨겨져 있습니다.

HTML 테이블 숨기기는 웹페이지를 더욱 간결하고 아름답고 읽기 쉽게 만들 수 있는 매우 일반적인 기술입니다. 표는 웹 디자인에서 가장 일반적으로 사용되는 요소 중 하나이며 다양한 데이터와 정보를 표시하는 데 사용할 수 있습니다. 그러나 때로는 표가 너무 길거나 너무 복잡하여 페이지가 복잡해 보일 수 있습니다. 테이블의 기능.

테이블 숨기기를 사용하면 웹페이지를 더욱 간결하고 명확하게 만들 수 있으며, 사용자는 필요에 따라 내용을 보거나 숨길 수 있습니다. 웹 디자인에서 JavaScript는 일반적으로 이벤트 리스너를 추가하여 테이블 내용을 숨기는 데 사용됩니다. 구체적인 단계는 다음과 같습니다.

1. HTML 파일에서 숨겨야 하는 테이블을 찾습니다. 후속 작업을 용이하게 하기 위해 테이블의 ID 속성 또는 클래스 속성을 설정할 수 있습니다.
2. JavaScript 파일에서 getElementById() 또는 getElementsByClassName() 메서드를 통해 숨겨야 하는 테이블을 가져옵니다.
3. 테이블에 클릭 이벤트를 추가하면 사용자가 테이블을 클릭하면 이 이벤트가 트리거됩니다. 이벤트 핸들러에서 style.display 속성을 사용하여 테이블 표시 및 숨기기를 제어합니다. 테이블을 숨기려면 style.display 속성을 "none"으로 설정하면 됩니다. 테이블을 표시하려면 style.display 속성을 "table" 또는 다른 값으로 설정하면 됩니다.

다음은 간단한 예입니다.

HTML 코드:

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>22</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>30</td>
    <td>男</td>
  </tr>
</table>

<button id="hideTable">隐藏表格</button>
<button id="showTable">显示表格</button>

JavaScript 코드:

var table = document.getElementById("myTable");
var hideButton = document.getElementById("hideTable");
var showButton = document.getElementById("showTable");

hideButton.addEventListener("click", function() {
  table.style.display = "none";
});

showButton.addEventListener("click", function() {
  table.style.display = "table";
});

위 예에서는 테이블과 두 개의 버튼의 DOM 요소를 각각 얻은 다음 Click 이벤트를 추가했습니다. 사용자가 Hide 버튼을 클릭하면 이벤트 핸들러가 트리거되고 테이블의 style.display 속성이 "none"으로 설정되어 테이블이 숨겨집니다. 사용자가 표시 버튼을 클릭하면 테이블을 표시하기 위해 테이블의 style.display 속성을 "table"로 설정하는 또 다른 이벤트 핸들러가 트리거됩니다.

JavaScript를 사용하여 테이블을 숨기는 것 외에도 CSS를 사용하여 이를 구현할 수도 있습니다. CSS에는 요소의 표시 및 숨기기를 제어하는 ​​데 사용할 수 있는 표시 속성이 있습니다. CSS 파일에 다음 스타일을 추가할 수 있습니다.

table.hidden {
  display: none;
}

그런 다음 HTML 코드에서 테이블에 일부 클래스 이름을 추가합니다.

<table class="myTable hidden">
  <!-- 表格内容 -->
</table>

여기서는 테이블에 두 개의 클래스 이름을 추가했습니다. 하나는 "myTable"이고 다른 하나는 "myTable"입니다. "숨겨져 있습니다". "myTable" 클래스 이름은 스타일 제어에 사용되고 "hidden" 클래스 이름은 테이블을 숨기는 데 사용됩니다. 테이블을 숨겨야 하는 경우 테이블을 표시하려면 테이블에서 "숨겨진" 클래스 이름만 제거하면 됩니다.

var table = document.querySelector(".myTable");
table.classList.remove("hidden");

이런 식으로 CSS를 통해 테이블을 숨기는 것이 더 유연하고 편리할 수 있습니다. JavaScript 코드를 많이 작성하지 않고도 HTML 코드에서 클래스 이름을 추가하거나 제거하기만 하면 테이블을 표시하고 숨길 수 있습니다.

웹 디자인에서 테이블 숨기기는 매우 중요한 기술입니다. 웹페이지를 더욱 간결하고 아름답고 읽기 쉽게 만들고 사용자 경험과 사용자 만족도를 향상시킬 수 있습니다. JavaScript로 구현하든 CSS로 구현하든 필요에 따라 테이블 숨기기 기술을 유연하게 사용하여 보다 우수한 웹 디자인을 만들 수 있습니다.

위 내용은 HTML 테이블이 숨겨져 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!