htmlテーブルが隠されています

HTML テーブルの非表示は、Web ページをより簡潔で美しく、読みやすいものにする非常に一般的なテクニックです。テーブルは Web デザインで最も一般的に使用される要素の 1 つであり、さまざまなデータや情報を表示するために使用できます。ただし、テーブルが長すぎたり複雑すぎたりして、ページが乱雑に見える場合があります。このとき、非表示機能を使用する必要があります。テーブルの機能。

テーブルを非表示にすると、Web ページがより簡潔かつ明確になり、ユーザーは必要に応じてコンテンツを表示または非表示にすることができます。 Web デザインでは、通常、テーブルのコンテンツを非表示にするために 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";
});

上記の例では、それぞれテーブルと 2 つのボタンの DOM 要素を追加し、2 つのボタンにクリック イベントを追加しました。ユーザーが [非表示] ボタンをクリックすると、イベント ハンドラーがトリガーされ、テーブルの style.display プロパティが "none" に設定され、テーブルが非表示になります。ユーザーが表示ボタンをクリックすると、別のイベント ハンドラーがトリガーされ、テーブルの style.display プロパティを "table" に設定してテーブルを表示します。

JavaScript を使用してテーブルを非表示にするほかに、CSS を使用して非表示にすることもできます。 CSS には、要素の表示と非表示を制御するために使用できる表示属性があります。次のスタイルを CSS ファイルに追加できます:

table.hidden {
  display: none;
}

次に、HTML コードで、いくつかのクラス名をテーブルに追加します:

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

ここでは、2 つのクラス名をテーブルに追加しました。 1 つは「myTable」、もう 1 つは「hidden」です。 「myTable」クラス名はスタイル制御に使用され、「hidden」クラス名はテーブルを非表示にするために使用されます。テーブルを非表示にする必要がある場合、テーブルから「非表示」クラス名を削除するだけでテーブルが表示されます。

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

このように、CSS を使用してテーブルを非表示にすることは、より柔軟で便利になります。多くの JavaScript コードを記述せずに、HTML コードでクラス名を追加または削除するだけで、テーブルを表示または非表示にできます。

Web デザインにおいて、テーブルの非表示は非常に重要なスキルです。 Web ページをより簡潔、美しく、読みやすくし、ユーザー エクスペリエンスとユーザー満足度を向上させることができます。 JavaScriptやCSSのどちらで実装しても、ニーズに応じてテーブルの非表示テクニックを柔軟に活用して、より優れたWebデザインを作成できます。

以上がhtmlテーブルが隠されていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。