ただの備忘記録

忘れないように記録を残します。忘れるから記録に残してます。そして、その記録が役立つといいかな。

JavaScriptで、HTMLのテーブルを組み替えるフォームを更新

2008年11月15日 | JavaScript

先日、

タグで出来た表を入れ換えるスクリプトを作りました。これは表の行と列の軸を入れ換えるというものでした。

基本仕様は、<table>タグを読込、<table>、<caption>、<tr>に分割します。<tr>が1行ですので、更にその中に<td>もしくは<th>が入っています。
各行から1つ目の枠(<td>か<th>)を取ってきて、新しい1つ目の行を作ります。

逆に1つ目の行から枠を取り出しながら、新しい各行へと割り振るやり方もあります。しかし、これが非常にややこしいです。一番問題になるのは、colspanとrowspanを設定して枠を繋いでいる場合です。

タグは行の頭から処理を行わないと、どんな表になるか判らない構造になっています。colspanやrowspanがあると、その部分は枠の情報が1つしかないため、統合された枠で情報を共有する必要があります。そのために、それを引き継ぎながら処理しなければなりません。

どちらにしても、古い表と新しい表が頭の中でこんがらがりながら作ることになってしまいました。
下の方法だと、スクリプトがかなりすっきりするのですが、引き継ぎの処理がうまくいかなかったので、諦めました。多分、前者の方法で悩みすぎて気力がなくなっていたのだと思います。

そこでふとアイデアが出ました。行の入替ができるなら、回転もできるのではないかと。
というのも、行列を入れ換えて、上下を入れ換えたら回転したように見えたからです。
しかし、上下の入替は少々やっかいです。これも統合された枠のことを考えなければなりません。でも、もっと簡単な方法がありました。左右の入れ換えです。
左右の入れ換えだったら統合された枠も関係ありません。そのまま後ろから読み取れば、綺麗に表になるのです。

これで行列と左右の入れ換え処理ができました。あとは、この2つのルーチンを組み合わせるだけでした。2つを同時に行うと回転処理になります。
次に左右の入れ換えの後、回転処理を2回行うと、上下の入れ換えができました。

この4つの機能をパネルで選べるようにしましたので、表をどんな向きに、どんな並びにでも変更できるようになりました。
最初から回転処理を作ろうと考えていたら、こううまくは行かなかったと思います。ある意味怪我の功名という感じです。

あと、オプション設定で行頭のtabや二重改行を取り除く機能を用意しています。
これがないと、元々tabを使って行頭の位置を整形していた場合に、これらが綺麗に適用されません。行数が変化するので、対応することができないので、削除して綺麗に見せます。

http://www.shurey.com/js/works/table_rotation.html



最新の画像もっと見る

4 コメント

コメント日が  古い順  |   新しい順
少々の機能アップを (秀麗)
2008-11-17 10:48:40
回転の機能に、連続回転を取り入れました。
これを使うと、入れ換えの手間が減りますので、続けて回転をさせることができます。
Unknown (KEI)
2013-02-27 09:11:07
はじめまして

ホームページのテーブルの縦横入れ替えの方法を探していて、こちらのサイトにたどり着きました。
現在はソース公開はされていないのでしょうか?
Unknown (秀麗)
2013-03-03 17:46:00
URLが変更されてました。修正しておきます。
Unknown (KEI)
2013-03-09 10:01:11
早速の対応、ありがとうございます。
テーブルが簡単に回転できてとても素晴らしいです。
また利用させていただきます。

コメントを投稿