Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

率を自動で計算してセルに表示する

IE5.0以降のみ(IE5.0では正しく表示されない場合があります)

JAVA Scriptを使用すると、データベースから読み込んだデータで計算を行い、結果をテーブルに表示することができます。ここでは、商品データベースの内容を表示する際に、標準価格と販売価格から割引率を求めて表示する方法について考えてみましょう。

■ 割引率を表示するセルの定義

テーブルの標準価格と販売価格の間に割引率を表示するためのセルを定義します。。

<TABLE ID="oTable" DATASRC=#list BORDER="1">
<THEAD>
<TR bordercolor="#000080" bgColor=#ff0000 height=30>
<TD align=middle><FONT color=#ffffff size=2><STRONG><B>メーカー</B></STRONG></FONT> <FONT color=#ffffff size=2><B>/</B></FONT> <FONT color=#ffffff size=2><STRONG><B>商品名</B></STRONG></FONT> </TD>
<TD align=middle><font color="#ffffff"><strong>標準価格</strong></font></TD>
<TD align=middle><font color="#FFFFFF"><strong>割引率</strong></font></TD>
<TD align=middle><FONT color=#ffffff size=2><STRONG><B>販売価格</B></STRONG></FONT> </TD>
<TD align=middle><NOBR><FONT color=#ffffff size=2><STRONG><B>送料</B> </STRONG></FONT></NOBR></TD>
<TD align=middle><NOBR><FONT color=#ffffff size=2><STRONG><B>納期</B> </STRONG></FONT></NOBR></TD>
<TD align=middle><FONT color=#ffffff size=2 width="40%"><STRONG>備考</STRONG></FONT> </TD>
</TR>
</THEAD>
<TBODY>
<TR BGCOLOR="#ffffbb">
<TD><DIV DATAFLD=name></DIV></TD>
<TD><DIV DATAFLD=teika ALIGN=right></DIV></TD>
<TD BGCOLOR="#ffe0ff"></TD>
<TD bgcolor="#ffffbb"><DIV DATAFLD=tokka ALIGN=right></DIV></TD>
<TD bgcolor="#ffffbb"><DIV DATAFLD=souryou></DIV></TD>
<TD><DIV DATAFLD=zaiko ALIGN=center></DIV></TD>
<TD><DIV DATAFLD=bikou></DIV></TD>
</TR>
</TBODY>
</TABLE>
■ ページの読み込み時の処理

ページの読み込み時に割引率を表示するJAVA Scriptを呼び出します。

<BODY onLoad="CalcDiscountRate()">

■ 割引率の計算と表示

スタイルシートで定義した内容を特定の列のセルに関連づけるための記述を行います。

<SCRIPT LANGUAGE="JavaScript">
<!--
function CalcDiscountRate(){
for(i=0;i<document.all.oTable.tBodies.length;i++){
document.all.oTable.tBodies[i].rows[0].cells[2].innerText =
Math.floor((1-document.all.oTable.tBodies[i].rows[0].cells[3].innerText/
document.all.oTable.tBodies[i].rows[0].cells[1].innerText)*100)+ "%"
}
}
//-->
</SCRIPT>

例では、特定のセルの値を計算し、計算結果を指定したセルに表示しています。セルの値は「cells」の「innnerText」プロパティで参照・設定することができます。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box