DOM で Table を操作するには？

DOM （Document Object Model） で Table を操作したい。具体的には、ある条件に該当する行を削除したい。

Table に class が付属していれば xpath を用いて容易に Table を特定できる。

var xpath ='//*[@class="class_attribute"]'; var tbody = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; var rows = tbody.rows;

上記のコードでは Table に class_attribute という class 属性が付与されていると仮定している。 ここで得られた tbody は HTMLTableElement、rows は HTMLCollection である。

rows[0] とすれば、HTMLTableRowElement が得られる。これは最初の行を意味する。最初の行の最初の列を取得するには rows[0].cells[0] とする。これは HTMLTableCellElementである。rows[0].cells[0].textContent とすれば最初の行、列の文字列が得られる（そこに文字列があれば）。もし、最初の行、列の内容が画像やリンクだった場合は rows[0].cells[0].childNodes[0] のように子ノードを辿ればよい。こうして、最終的に行の内容を取得でき、その内容から削除すべき行か否かを判断する。

任意の行を削除するには tbody.deleteRow(i) とすれば良い。「i」は削除したい行の 0 から始まる行番号である。 

もし、上記の処理をループで行う場合は、0 行目から順に行うのではなく、行の最後から行うと簡単にコードを記述できる。

タグ：DOM