JavaScriptテーブルの2行目を削除-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

王林

May 16, 2023 am 10:42 AM

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

1. HTML の基礎知識

JavaScript を学習する前に、HTML テーブルの基礎知識を習得する必要があります。 HTML テーブルは

要素によって定義され、各行は要素によって定義され、各列は

要素によって定義されます。以下は、単純な 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 行目を簡単に削除できます。完全なコードは次のとおりです:




  
  JavaScript删除表格中的第二行



<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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。