割引率の高い商品を強調表示する

JAVA Scriptを使用すると、セルの値が指定された条件に合う場合に、セルの表示スタイルを変更することができます。ここでは、商品データベースの内容を表示する際に、標準価格と販売価格から割引率を求めて、割引率の高い商品を目立たせるために、セルの色と書体を自動で変更表示する方法について考えてみましょう。

■　割引率の算出

JAVA Scriptを使用して、割引率を計算します。

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

■　割引率の表示

JAVA Scriptで計算した割引率を表示します。

document.all.oTable.tBodies[i].rows[0].cells[3].innerText =
document.all.oTable.tBodies[i].rows[0].cells[3].innerText + "%"
}
}
//-->
</SCRIPT>

■　セルの背景と書体の変更

割引率のセルを参照し、20％以上の割引率が設定されている場合は、文字の背景色と書体を変更します。

if(document.all.oTable.tBodies[i].rows[0].cells[3].innerText>=20){
document.all.oTable.tBodies[i].rows[0].cells[3].bgColor = "pink";
document.all.oTable.tBodies[i].rows[0].style.color = "red";
document.all.oTable.tBodies[i].rows[0].style.fontWeight = "bold";
}

例では、for構文で各行の割引率の計算を繰り返し、if構文で割引率が20％以上のデータの文字色や背景色等を変更してセルを協調表示する処理を行っています。

JAVA Scriptでは、０から始まる値で対象となる行や列を指定します。このため、４行目は「３」、３列目は「２」という値を使って表します。

割引率は　「(1-特価/定価)×100」で求めることができます。例では、計算結果の整数部分だけを取り出すために、「Math」オブジェクトの「floor」メソッドを使用しています。「Math」オブジェクトには、与えられた数値の整数部分を取り出すために３種類のメソッドが用意されています。

メソッド	整数化の方法
ceil	切り上げ
floor	切り捨て
round	四捨五入

 

<<<戻る