ホームページ > ウェブフロントエンド > フロントエンドQ&A > javascriptはテーブルの行を削除します

javascriptはテーブルの行を削除します

PHPz
リリース: 2023-05-21 10:01:37
オリジナル
1858 人が閲覧しました

JavaScript では、DOM 操作を通じてテーブル内の行を簡単に削除できます。次に、テーブル内の行を削除する 2 つの基本的な方法を紹介します。

  1. 削除は、テーブル table オブジェクトの deleteRow() メソッドによって実行されます。

HTML では、削除する行番号に ID を割り当てるか、行番号を指定できます。削除する行番号、削除する行の位置。コードは次のとおりです。

コードの説明:

  • このメソッドの deleteRow() メソッドは、指定された位置 (0 から数えた) の行を削除するために使用されます。
  • この例では、最初の行は位置 0 にあり、2 番目の行は位置 1 にあり、以下同様になります。
  • 削除する行がテーブルにない場合、エラーがスローされます。
  • テーブルに対応する変数を導入する必要があり、変数の値は getElementById() などを使用して取得できます。
  1. HTMLElement オブジェクトのparentNode 属性による削除

上記の方法に加えて、parentNode 属性を使用して要素を削除することもできます。 HTML では、現在選択されている行要素の親要素、つまりテーブルの tbody 要素を取得することで行を削除できます。コードは次のとおりです。

コードの説明:

  • まず、削除する行要素を取得します。getElementById() メソッドまたはその他のメソッドを使用して取得できます。
  • 次に、row 要素オブジェクトのparentNode プロパティを使用して table テーブル オブジェクトを取得し、そのオブジェクトから tbody 要素を取得します。
  • 最後に、tbody オブジェクトのremoveChild() メソッドを使用して、選択した行要素を削除します。

概要

テーブル内の行の削除は、deleteRow() メソッドまたはparentNode 属性を使用することで簡単に行えます。多くの開発者は、シンプルさと明確さという利点を考慮して、 deleteRow() メソッドの使用を好みます。一方、parentNode 属性の使用は、HTML ドキュメント内の任意の要素で使用できる、より一般的なアプローチです。再利用可能な機能を実装したい開発者にとっては、parentNode 属性を使用する方が間違いなく適しています。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート