ただの備忘記録

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

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


JavaScript作業メモ

2008年11月15日 | JavaScript
//デバッグ用(タイトルに状況を表示)
document.title = s+"/"+(new Date).getSeconds();
//s=デバッグしたい変数

//デバッグ用グローバル変数
debug = "";
//画面をダブルクリックするとdebugを表示
document.ondblclick = function() {alert(debug);}
//デバッグしたい場所で位置情報と変数などを追加
debug += "step1:"+s+"n";

//デバッグしたい関数をループ内で見ながら、停止もできる
var bool = confirm(count);
if (bool) {break;}

//文字列を整数にする
parseInt("02") -> 0
//二桁の月や日付を処理するのに使うと正しく処理できないため
//eval("02")を使うと良い

//同じように動作する
//document.getElementById("id").innerHTML
//document.all["id"].innerHTML
//allは使わない方が良い。
//FirefoxではinnerTextが使えないのでtextContentを使用

//document.getElementByName("name")
//IE7、Firefoxともに動作しない。

//document.onmousemove = function() {getRun();}
//は省略して
//document.onmousemove = getRun;
//と表記できる。

//ブラウザの分岐
if (document.all) {c_browser = "E";}
//○IE
//×Firefox、Safari
else if (document.layer) {c_browser = "F";}
//○firefox
//×IE、Safari
else {c_browser = "S";}

//gooブログにURLを記述する場合の注意点
gooブログでは「JavaScript」の文字を含むリンクを作成しようとすると、小文字に変換し更に全角に変換してしまいます。
これはスクリプトを埋め込まれないための対処と思いますが、URLまで変更してしまうのでは困ります。
エスケープ文字を使うことで回避していましたが、対応されてしまいましたので、転送するHTMLを設置することにします。
http://www.shurey.com/Soft/js-trans.html

FORMの名前に「-」を使うとエレメントの行でエラーが発生する。

//二重の改行を1つにする
s.replace(/[nr]{2,}/g,"n")