田舎システムエンジニアの日常

アクセスカウンタ

zoom RSS javascriptでDOM

<<   作成日時 : 2008/06/30 11:39   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 0 / コメント 2

■javascriptでDOM

久しぶりの更新。

最近はさぼり気味。。
今回はjavascriptでDOMを使ってみようと思う。

今までDOMって聞いたことあったけど、興味なく調べてなかった。

調べてみたらなかなか使えそう!

たとえば、以下のような画面があったとして、
各行の選択ボックスを選択した場合に選択された行の数量の合計を表示しろ
って仕様だった場合は、今までinputタグのreadOnlyやhiddenで数値などの情報を保持して処理してた。

↓こんな感じ
画像


けど、DOMを使うとinputタグなど必要なく、
html上に記入したtdタグの要素を参照・挿入が可能となる。


↓こんな感じ
画像


↓選択時
画像



なぜ今まで知らなかったのだろうか、、。
ただ、明示的にinputタグにname付けて処理した方がいいけどなぁ。
見た目(デザイン)的にはDOMの方がいいかな。
あと出力したhtmlを帳票としてそのまま印刷する時なんか
inputタグの線が表示されないし、レイアウトが崩れないからいいね。










今回のサンプルここから↓

<html>
<head>
<title>DOM</title>
<style>
td.title {
background-color: gray;
color:white;
}

</style>
<script>
<!--
function dom_test(index,chk) {

// tableタグのid="list_table"を取得
var table = document.getElementById("list_table");
var tr = table.getElementsByTagName("tr");
var td = tr[index].getElementsByTagName("td"); //index番目の<tr>内にある<td>を取得

// tableタグのid="goukei_table"を取得
var table1 = document.getElementById("goukei_table");
var tr1 = table1.getElementsByTagName("tr");
var td1 = tr1[0].getElementsByTagName("td"); //0番目の<tr>内にある<td>を取得


// チェックが選択された場合、行の色を変更
if(chk.checked==true){
// 選択行の色を変更
td.item(0).style.backgroundColor = "yellow";
td.item(1).style.backgroundColor = "yellow";
td.item(2).style.backgroundColor = "yellow";
td.item(3).style.backgroundColor = "yellow";

if(td1.item(1).firstChild!=null){
td1.item(1).firstChild.nodeValue = Number( td1.item(1).firstChild.nodeValue ) + Number( td.item(2).firstChild.nodeValue );
}

}else{
// 選択行の色を変更
td.item(0).style.backgroundColor = "white";
td.item(1).style.backgroundColor = "white";
td.item(2).style.backgroundColor = "white";
td.item(3).style.backgroundColor = "white";

if(td1.item(1).firstChild!=null){
td1.item(1).firstChild.nodeValue = Number( td1.item(1).firstChild.nodeValue ) - Number( td.item(2).firstChild.nodeValue );
}

}

}
-->
</script>
</head>
<body>
<h3>java scriptでDOM</h3>
<table border="1" cellspacing="0" cellpadding="0" id="list_table">
<tr>
<td align="center" width="110" class="title">部品コード</td>
<td align="center" width="120" class="title">部品名</td>
<td align="center" width="80" class="title">数量</td>
<td align="center" width="50" class="title">選択</td>
</tr>
<tr>
<td align="center" width="">000000</td>
<td align="left" width="">部品1</td>
<td align="right" width="">100</td>
<td align="center" width=""><input type=checkbox onclick="dom_test(1,this)"></td>
</tr>
<tr>
<td align="center" width="">111111</td>
<td align="left" width="">部品2</td>
<td align="right" width="">200</td>
<td align="center" width=""><input type=checkbox onclick="dom_test(2,this)"></td>
</tr>
<tr>
<td align="center" width="">222222</td>
<td align="left" width="">部品3</td>
<td align="right" width="">300</td>
<td align="center" width=""><input type=checkbox onclick="dom_test(3,this)"></td>
</tr>
<tr>
<td align="center" width="">333333</td>
<td align="left" width="">部品4</td>
<td align="right" width="">400</td>
<td align="center" width=""><input type=checkbox onclick="dom_test(4,this)"></td>
</tr>

</table>
<br>
<table border="1" cellspacing="0" cellpadding="0" id="goukei_table">
<tr>
<td align="center" width="110" class="title">数量合計</td>
<td align="right" width="80" >0</td>
</tr>
</table>
</body>
</html>


今回のサンプルここまで

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
なるほど(納得、参考になった、ヘー)

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
これ始めたら女釣れすぎwww
いつもテ〃リ嬢に金払ってたのがバカみてぇ。。
だってヤる度に金くれんだもんヽ(´ー`)ノ
ぶっちゃけ風俗は卒業ッス(´ー`)y─┛~~

http://darani9pi.net/raku/yzxLTDL6
祖千ン
2008/07/20 03:44
オナ見だけの予定だったけど、ちゃっかり最後までフィニッシュwwww
だって下のお口がツユダクだったんだから挿れるしかないっしょヽ(゜∀゜)ノ
指マ&栗攻め→イラ魔チォ→騎乗→ナカ出シ
の黄金パターンでガッツリ楽しんできますたぁぁあぁヽ(´ー`)ノ

http://c-melon.net/ameban/YIZSUB6S
虎とら
2008/09/06 11:44

コメントする help

ニックネーム
本 文
javascriptでDOM 田舎システムエンジニアの日常/BIGLOBEウェブリブログ
文字サイズ:       閉じる