JavaScriptテーブルの2行目を削除

JavaScript は Web 開発で広く使用されているプログラミング言語です。JavaScript に習熟すると、Web ページをよりインタラクティブでダイナミックなものにすることができます。よく使われるアプリケーションの一つにテーブルの削除機能がありますが、今回はJavaScriptを使ってテーブルの2行目を削除する方法を詳しく紹介します。

1. HTML の基礎知識

JavaScript を学習する前に、HTML テーブルの基礎知識を習得する必要があります。 HTML テーブルは f5d188ed2c074f8b944552db028f98a1 要素によって定義され、各行は a34de1251f0d9fe1e645927f19a896e8 要素によって定義され、各列は b6c5a531a458a2e790c1fd6421739d1c 要素によって定義されます。以下は、単純な HTML テーブルの例です。

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

2. JavaScript の基礎知識

上記の HTML コードでは、3 行 3 列で構成されるテーブルが表示されます。テーブル内の行や列の追加と削除は、HTML テーブルの基本的な操作です。 JavaScript を使用してテーブルを操作するには、JavaScript の基本的な知識に精通している必要があります。

JavaScript では、getElementById() メソッドを使用して HTML 要素を取得します。ここで、「id」は HTML 要素の一意の識別子です。 getElementById() メソッドは、指定された ID プロパティを持つ最初のオブジェクトへの参照を返します。これを使用すると、HTML DOM 要素を簡単に操作できます。

さらに、DOM (ドキュメント オブジェクト モデル) が HTML ドキュメントをどのように編成するかについても理解する必要があります。 DOM は、HTML 要素を取得、追加、削除、および変更するための一連の標準メソッドを定義します。

3. テーブルの 2 行目を削除する JavaScript

JavaScript と HTML テーブルの基本知識を習得したので、次にテーブルの 2 行目を削除する JavaScript コードを作成します。表の2行目。

まず、HTML テーブルを作成する必要があります:

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

次に、JavaScript を使用してテーブルへの参照を取得し、2 行目を削除する必要があります。具体的なコードは次のとおりです:

var table = document.getElementById("myTable"); //获取表格的引用
table.deleteRow(1); //删除第二行

.deleteRow() メソッドは、指定されたインデックスのテーブル行を削除するために使用されます (ここでは、2 行目のインデックスを 1 に指定しています)。

4. 完全なコード

上記の操作に従って、テーブルの 2 行目を簡単に削除できます。完全なコードは次のとおりです:

  
  



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

删除第二行

<script>
function deleteRow() {
  var table = document.getElementById("myTable");
  table.deleteRow(1);
}
</script>

5. 概要

学習と実践を通じて、テーブルの 2 行目を削除する JavaScript メソッドを習得しました。 JavaScript はテーブル操作だけでなく、Web ページのイベント、スタイル、コンテンツの処理にも使用できます。 JavaScript を深く学ぶことで、Web ページの動的な効果とインタラクション方法をよりよく把握し、Web デザインと開発のレベルと品質を向上させることができます。

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