JavaScript を使用して HTML テーブルから列を削除するにはどうすればよいですか?

HTML では、Web ページ上にデータをフォーマットされた方法で表示するためにテーブルが使用されます。テーブルには、データを表示する列と行が含まれています。

場合によっては、開発者がテーブル列を削除したり、ユーザーにテーブル列の削除を許可したりする必要があります。たとえば、このテーブルにはユーザー データが含まれており、「年齢」列と「誕生日」列があります。この場合、年齢は「誕生日」列から取得できるため、「年齢」列を削除する必要があります。

開発者は、deleteCell() メソッドを使用して特定の列を削除できます。このチュートリアルでは、インデックス、クラス名、列名に基づいてテーブル列を削除する方法を学習します。さらに、開発者はテーブルの列がゼロから始まるインデックスであることを覚えておく必要があります。

ユーザーは、次の構文に従って deleteCell() メソッドを使用して、テーブル内の特定の列を削除できます。

上記の構文では、テーブルの各行を反復処理し、「インデックス」からセルを削除します。ここで、「index」は削除する列のインデックスです。

例 1 (インデックスによるテーブル列の削除)

以下の例では、単語番号を含むテーブルを作成しました。さらに、CSS で境界線を提供することでテーブルのスタイルを設定します。ユーザーがボタンをクリックするたびに、deleteColumn() 関数が実行されます。

deleteColumn() 関数では、id を使用してテーブルにアクセスします。さらに、「rows」プロパティを使用してテーブルのすべての行を取得し、配列の「length」プロパティを使用して総行数を計算します。

「index」変数を 2 で初期化し、3 番目の列を削除します。その後、for ループを使用してテーブルのすべての行を繰り返し処理します。 deleteCell() メソッドを使用して、各行の 3 番目のセルを削除します。

出力では、ユーザーはボタンをクリックしてテーブルから 3 番目の列を削除できます。

例 2 (タイトル テキストによるテーブル列の削除)

以下の例では、食品データを含むテーブルを作成します。この例では、ヘッダー テキストを使用してテーブル列を削除します。

deleteColum() 関数では、テーブルのタイトルにアクセスします。その後、すべてのヘッダー行にアクセスします。次に、ヘッダー行を反復処理して、内部 HTML として「カロリー」を含むヘッダー インデックスを見つけます。

列インデックスを見つけた後、最初の例で行ったのと同じように、for ループと tableCell() メソッドを使用して各行から特定のセルを削除できます。

出力内で、ユーザーはボタンをクリックして「カロリー」列を削除する必要があります。

例 3 (クラス名に基づいて複数のテーブル列を削除)

次の例では、クラス名を使用してテーブルの複数の列を削除する方法を学習します。

ここでは、まずテーブルのすべての行にアクセスし、次に for ループを使用してそれらの行を反復処理します。その後、「追加の」クラス名を含む特定の行のすべてのセルにアクセスします。 while ループを使用してすべてのセルをループし、「cells[0].parentNode.removeChild(cells[0])」を使用してすべてのセルを 1 つずつ削除します。

上記のコードでは、cell[0] が現在のセルです。 「parentNode」は、removeChild() メソッドによって子ノードが削除される行を指します。

出力では、ユーザーはボタンをクリックしてテーブルから複数の列を削除できます。

JavaScript を使用してテーブルから列を削除する方法を学習しました。最初の 2 つの例では、列インデックスをパラメータとして渡して deleteCeil() メソッドを使用しました。 3 番目の例では、removeChild() メソッドを使用して特定のセルを削除します。

以上がJavaScript を使用して HTML テーブルから列を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。