HP内のページをまとめていたら、別々のページにある表の並びが、一方は縦に、一方は横になっていました。
これを揃えるために横並びの表を縦に変更することにしました。
しかし、HTMLエディタにはそんな便利な機能はありません。
１つ１つ表を組み替えるのは結構たいへんです。
そこで、JavaScriptを使って、テーブルの行と列を入れ換えるプログラムを作ってみました。
まずは、外側からタグを識別して新しいテーブルに組み直します。
<table>タグ、<caption>タグ、<tr>とここまでは順調です。
次に<td>と<th>を同時に処理しなければいけません。
それぞれ処理してから、比較して優先順位を決めるようにしたのですが、うまく動作しません。
行の位置情報を比較すると、数値が小さい方が前になるのですが、タグがない場合に-1になるため、優先順位が正しくなりません。
一日目はそこで終わり。
二日目は、<td>と<th>を同時に処理する部分を考え直します。
結局、<td>を処理したあと、<th>を処理する場合にだけ<td>があるかどうか考えて処理することにしました。タグがない場合の処理を１つすっとばした訳です。
これでスッキリさせることができました。
なんとか通常の表なら行列を入れ換えることに成功しました。
次に、colspanとrowspanへの対応を考えます。colspanはrowspanへ、rowspanはcolspanへと交換します。
各行の列を１つ１つ取りながら、新しい行を作っていくというルーチンになっています。colspan=2ならば、２つの列を繋ぐので、新しい２つの行にまたがるように、処理を飛ばすところを作ります。
rowspanの方から先に考え、１つの列を順番に取りながら、列を飛ばします。
colspanの方は、一旦列番号のついた配列変数に値を入れて、新しい行の番号で参照して、処理を飛ばします。
なんとか動くことに成功し、2日目が終わりました。
3日目は、色々なパターンで動作テストを行います。
そこでcolspanとrowspanが3以上のときに正しく動かないことが判りました。単純なことに値から-1するのを忘れていたのです。
様々なパターンのテーブルを組んでテストして、複雑な表でもうまく動作することを確認して完成になりました。
元々のテーブルにタグが正しくない場合は、さすがに正しい結果が得られません。
変換前後の表もプレビューできるようにしたので、そこで確認しながら、元の表も手直しするしかありません。
