DOMでテーブルを操作する1[index][top][bottom][prev][next]このテキストは、お使いのWebブラウザが、JavaScriptを利用できないか、又は無効となっている場合に、表示されます。当コンテンツは、JavaScriptが必須となっておりますので、JavaScriptが有効な環境で、閲覧ください。ご注意:JavaScriptをWeb上で利用する際は、必ずセキュリティ上のリスクがあります。ご利用のWebブラウザの、セキュリティホールの情報を、必ず確認の上ご利用ください。この段落を読んで、内容が理解できない場合、JavaScriptの利用は、なさらない事をお勧めします。当社では、WebブラウザのJavaScriptを有効にしたために何らかの損害をこうむった場合も、その責を負いませんので、あくまでもご自身の責任に於いて、行ってください。DOMでテーブルを操作する1。DOMで、テーブルを操作するにはどのようなアプリケーションでも、クライアントに情報を表示したり、その内容を更新したりする場合、スプレッドシート状の画面が、主流になりがちです。HTMLドキュメントでそのような画面を作成するときは、tableエレメントが活躍します。DOMでは、tableの内容をいろいろと操作するための、多くのAPIが用意されています。テーブルオブジェクトの構造は?HTMLのtableエレメントに該当する、DOMのオブジェクトが、HTMLTableElementです。HTMLTableElementオブジェクトから取得できる情報や、直接操作ができる対象は、殆どが行単位のものです。raises(DOMException);};rows属性には、当該テーブルの全ての行が、HTMLTableRowElementオブジェクトの集合として、格納されています。tBodies属性には、tbodyエレメントに該当する内容が、HTMLTableSectionElementオブジェクトの集合として、複数(存在すれば)格納されています。tbodyに行を追加したり、行を削除したりすることは可能ですが、なぜかtbodyそのものを追加削除することは、できないようです。HTMLTableSectionElementオブジェクトも、行の集合です。操作の対象は、やはり行単位です。raises(DOMException);};rows属性は、HTMLTableElementオブジェクトのrows属性と同じく、HTMLTableRowElementオブジェクトの集合です。insertRowメソッドからの戻りも、HTMLTableRowElementオブジェクトとなります。HTMLTableRowElementオブジェクトは、行を管理するオブジェクトです。HTML上のtrエレメントに該当します。取得できる情報や、操作の対象は、セル単位となります。raises(DOMException);};cells属性は、HTMLTableCellElementオブジェクトの集合です。insertCellメソッドからの戻りも、HTMLTableCellElementオブジェクトとなります。HTMLTableCellElementオブジェクトは、テーブルの一つ一つのセルを現します。HTML上のthエレメントやtdエレメントに該当します。具体的な、テーブルの操作は次のようになります。次のようなHTMLがあるとき、3行行を挿入し、各行に5列のセルを挿入します。各セルに"targetTable.r[行インデックス].c[列インデックス]"形式の、idを設定します。}}次のスクリプトは、ヘッダ・フッタ以外の行(ボディ部分)を、全て削除します。targetTable.deleteRow(headerCount);}次のスクリプトも、ヘッダ・フッタ以外の行(ボディ部分)を、全て削除します。下の行から削除していくのがみそです。上のスクリプトのほうが、ループの回数も少なくてスマート。特定のtbodyエレメントの内容だけを削除する、と云う様な場合は、改造して使えるけど。下のアンカーのいずれかをクリックすると、ここにテーブルが現れます。(残念ながら、一部のWebブラウザでは、画像が表示されません。それはそれはカワイイのに・・・)最近のお気に入り。Reserved.新規作成日:2002.10.20改定版公開:2007.02.04最終更新日:2007.02.04。