2016年04月30日

iframe内で画面が崩れること無くHTML javascript table ついでにクッキーを使う時に書いたコード

javascriptで内申のランクを計算するものをつくりましたが、
その時に、
物は試しということで、
ブログの記事内で、
HTMLをベタ書きしてみました。
が、
崩れ方が、予想以上にダメでした。💤

・・・という訳で、久々にiframe内でHTML/javascriptを使ってみて、
試して期待通りに上手くいったところだけ
書いていきます。

表示に時間が掛かる場合があるので、
続きは、追記で・・。
@iframeに意図通りの縮小表示をする




※scaleを変えることで縮小量を変えることが出来ます。
srcは、言うまでもないですが替えてください。
originは意外に大事。指定しないとアレッ?ということになります。
 参考 http://www.vintage.ne.jp/blog/2014/08/331

A配列をクッキー書込

//クッキー削除
document.cookie = 'nlist_hk=;expires=Fri, 31-Dec-1999 23:59:59 GMT;';
//すでに配列naisin[ ]にデータ格納済み
naisin[ cnt_limit ] = ""; //最後にダミーを設定
var naisin_str = naisin.join("&");
document.cookie = 'nlist_hk=' + naisin_str + ';expires=Tue, 1-Jan-2030 00:00:00 GMT;'; //目一杯の日付をセット

※日付がざっくりです。ばれてると思いますが。

Bクッキーから配列へ展開

if (document.cookie) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var str = cookies[i].split("=");
//クッキーにあるデータを読み込み、配列に展開する処理
if (str[0] == "nlist_hk") {
var tmp_str = str[1];
mylist = tmp_str.split('&');
//フィルタリング(今回必要な物は数値のみ)
for (var j = 0; j < mylist.length; j++) {
mylist[j] = parseInt(mylist[j], 10);
}
//ここから処理色々
}
//ここから処理色々
}
//ここから処理色々
}

※足りない処理はいっぱいありますが、このようなコードを書くと
 いい感じで動くようで・・
 参考 http://www9.plala.or.jp/oyoyon/html/script/cookie.html

Cテーブル要素へのアクセス

var myTable = document.getElementById('eTbl'); /* 特定の table 要素 */
var myTrs = myTable.getElementsByTagName( "tr" ); /* その中の tr 要素群 */
var myTds = []; /* その中の td 要素群(を取得するための配列を宣言) */
var j = 0; /* 配列カウンタ(クッキーデータ)用 */
for ( var r = 1; r < myTrs.length; r ++ ) { /* tr 要素群の個数(=行数)だけ繰り返す1行目は見出し行でスキップ */
myTds = myTrs[ r ].getElementsByTagName( "td" ); /* 行の中の td 要素群を取得 */
for ( var d = 0; d < myTds.length-1; d ++ ) { /* td 要素群の個数(=列数)だけ繰り返す 最終列はスキップしたい*/
myTds[ d ].innerHTML = mylist[j]; /* td 要素の中に配列の中身を書き込む */
j ++; /* 配列のカウンタを加算 */
}
}

※ここは色々と試して悩みましたが、こんな感じで上手くいきました。
 わりと、正統派コードって感じになりましたね。
 参考にしたURLを書こうと思ったら、出てきませんでした。
 見つけ次第追記します。


という訳で、ワケワカメ状態になることもしょっちゅうですが、
カンバルぞっと。


banner_03.gif自分の書いたコードが読めなくなる忘却王子の座はもらった・・


posted by ろびんいちごー at 19:03| Comment(0) | TrackBack(0) | 開発(Eclipse/swt/java/javascript/php/HTML) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック


Powered by Seesaa