【1】以下のように details.htmlとdetails.js を更新します。他は前回までと同じです。
details.html
<html>
<head>
<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="details.js"></script>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="details.css" rel="stylesheet" type="text/css">
<title>details</title>
</head>
<body>
伝票
<span id="slipDisplay"></span><br /><br />
<a href="" name="linkNewDetails" id="linkNewDetails">明細新規</a>
<form name="form2">
<p>
<input type="button" name="btnInsertDetails" id="btnInsertDetails" value="明細追加">
<input type="button" name="btnUpdateDetails" id="btnUpdateDetails" value="明細更新">
<input type="button" name="btnDeleteDetails" id="btnDeleteDetails" value="明細削除">
</p>
GOODS_CD:<span id="goodsDisplay"></span>
AMOUNT:<input type="text" name="txtAmount" id="txtAmount">
MEMO:<input type="text" name="txtMemo" id="txtMemo">
</form>
<div id="detailsDisplay"></div>
<div id="totalDisplay"></div>
<br />
<br />
<br />
<br />
<br />
<div id="sqlDisplay"></div>
</body>
</html>
details.js
var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
txtAmount = document.getElementById("txtAmount");
txtMemo = document.getElementById("txtMemo");
txtAmount.onfocus = function (){focus(this);}
txtAmount.onblur = function (){blur(this);}
txtMemo.onfocus = function (){focus(this);}
txtMemo.onblur = function (){blur(this);}
document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
document.getElementById("linkNewDetails").onclick = function (){return newDetails();}
dbConnect();
slipDisplay();
goodsDisplay();
}
function focus(obj){
obj.style.backgroundColor = "#ffff00";
}
function blur(obj){
obj.style.backgroundColor = "#ffffff";
}
function slipDisplay() {
//伝票を表示する関数
var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";
var recordSet = database.Execute(mySql);
document.getElementById("slipDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectSlip\" id=\"selectSlip\">\n";
tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + "伝票番号" + recordSet(0) + " 日付" + dateFormat(recordSet(1)) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("slipDisplay").innerHTML = tempHtml;
selectSlip = document.getElementById("selectSlip");
selectSlip.onchange = function (){slipChange(this);}
recordSet.Close();
recordSet = null;
}
function slipChange(obj) {
//伝票を選択した時の関数
if(obj.selectedIndex==0){
textClearDetails();
goodsDisplay();
document.getElementById("detailsDisplay").innerHTML = "";
document.getElementById("totalDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
alert("伝票を選択してください。");
}else{
textClearDetails();
goodsDisplay();
detailsDisplay();
sqlDisplay("selectedIndex:" + obj.selectedIndex + " value:" + obj.value);
}
}
function detailsDisplay() {
//明細を表示する関数
var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
mySql = mySql + "from T08Details,T06Goods ";
mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
mySql = mySql + "and SLIP_CD = " + selectSlip.value;
mySql = mySql + " order by DETAILS_CD";
var recordSet = database.Execute(mySql);
document.getElementById("detailsDisplay").innerHTML = "";
var tempHtml = "<select size=\"10\" name=\"selectDetails\" id=\"selectDetails\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">";
tempHtml = tempHtml +"[DETAILS_CD]:" + recordSet(0) + " [SLIP_CD]:" + recordSet(1);
tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(2) + " [PRICE]:" + recordSet(3);
tempHtml = tempHtml + " [AMOUNT]:" + recordSet(4) + " [MEMO]:" + recordSet(5);
tempHtml = tempHtml + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("detailsDisplay").innerHTML = tempHtml;
document.getElementById("selectDetails").onchange = function (){detailsChange(this);}
recordSet.Close();
recordSet = null;
totalDisplay();
}
function detailsChange(obj) {
//明細を選択した時の関数
var mySql = "select GOODS_CD,AMOUNT,MEMO ";
mySql = mySql +"from T08Details ";
mySql = mySql +"where Details_CD = " + obj.value ;
var recordSet = database.Execute(mySql);
selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
txtAmount.value = recordSet(1);
txtMemo.value = recordSet(2);
recordSet.Close();
recordSet = null;
sqlDisplay("selectedIndex:" + obj.selectedIndex + " value:" + obj.value);
}
function goodsDisplay() {
//商品を表示する関数
var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
var recordSet = database.Execute(mySql);
document.getElementById("goodsDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectGoods\" id=\"selectGoods\">\n";
tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("goodsDisplay").innerHTML = tempHtml;
selectGoods = document.getElementById("selectGoods");
selectGoods.onchange = function (){goodsChange(this);}
recordSet.Close();
recordSet = null;
}
function goodsChange(obj) {
//商品を選択した時の関数
if(obj.selectedIndex==0){
document.getElementById("sqlDisplay").innerHTML = "";
alert("商品を選択してください。");
}else{
sqlDisplay("selectedIndex:" + obj.selectedIndex + " value:" + obj.value);
}
}
function sqlDisplay(_mySql) {
//SQLを表示する関数
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
function newDetails(){
//明細を新規作成する関数
textClearDetails();
document.getElementById("sqlDisplay").innerHTML = "";
goodsDisplay();
detailsDisplay();
selectGoods.focus();
return false;
}
function textClearDetails() {
//テキストボックスをクリアする関数
txtAmount.value = "";
txtMemo.value = "";
}
function dataInsertDetails() {
//データを追加する関数
try{
if(dataCheckDetails(1)){
var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";
mySql = mySql + "values(";
mySql = mySql + Number(selectSlip.value) + ",";
mySql = mySql + Number(selectGoods.value) + ",";
mySql = mySql + Number(txtAmount.value) + ", '";
mySql = mySql + txtMemo.value + "'";
mySql = mySql +")";
sqlDisplay(mySql);
database.Execute(mySql);
detailsDisplay();
alert("追加しました。");
}
}catch(error){
alert(error.number + "\n" + error.description);
}
}
function dataUpdateDetails() {
//データを更新する関数
if(dataCheckDetails(1)){
var mySql = "update T08Details set ";
mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);
mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);
mySql = mySql + ",MEMO = '" + txtMemo.value + "'";
mySql = mySql + " where Details_CD = " + Number(selectDetails.value);
sqlDisplay(mySql);
database.Execute(mySql);
detailsDisplay();
alert("更新しました。");
}
}
function dataDeleteDetails() {
//データを削除する関数
if(!confirm("本当に削除しますか？")){
return ;
}
if(dataCheckDetails(0)){
var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
sqlDisplay(mySql);
database.Execute(mySql);
textClearDetails();
detailsDisplay();
goodsDisplay();
alert("削除しました。");
}
}
function dataCheckDetails(flag){
//データをチェックする関数
var tempStr = "は必ず入力してください。";
if (flag == 1 && selectGoods.value == 0) {
alert("GOODS_CD" + "は必ず選択してください。");
return false;
}
if (flag == 1 && txtAmount.value == "") {
alert("AMOUNT" + tempStr);
return false;
}
if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {
alert("AMOUNTには半角数字を入力してください！");
txtAmount.focus();
return false;
}
if (flag == 1 && txtMemo.value == "") {
alert("Memo" + tempStr);
return false;
}
return true;
}
function goodsIndexSearch(goodsCd){
//商品選択ボックスのIndexを検索する関数
var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
var recordSet = database.Execute(mySql);
var goodsIndex = recordSet(0);
return goodsIndex;
}
function totalDisplay(){
//明細のtotalを計算する関数
var mySql = "select sum(PRICE * AMOUNT) ";
mySql += "from T08Details,T06Goods ";
mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
mySql += "and SLIP_CD = " + selectSlip.value;
var recordSet = database.Execute(mySql);
var tempHtml = "TOTAL:" + recordSet(0) + "円";
document.getElementById("totalDisplay").innerHTML = tempHtml;
recordSet.Close();
recordSet = null;
}
【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。
★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。
★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。
【3】明細が表示されました。
【4】伝票選択ボックスから伝票番号「23」を選んでください。
【5】明細のTOTAL（合計金額）が表示されています。
【6】念のため計算して確認してみましょう。
PRICE * AMOUNT は 単価 × 数量 とお考えください。
（129800×1) + (39800×2) = 209400
となるのでTOTALの計算は合っていますね。
【7】次はデータの追加・更新・削除を行い、TOTALがきちんと表示されることを確認してみましょう。「明細新規」をクリックします。
【8】「デジタルカメラ」、「1」、「テスト」と入力してください。
【9】「明細追加」ボタンをクリックします。
【10】明細が追加され、TOTALが再計算されました。
【11】今追加したレコードをクリックします。
＊更新、削除を行う前は必ず操作の対象となる明細をクリックしなければなりません。
【12】AMOUNTを「2」に変更します。
【13】「明細更新」ボタンをクリックします。
【14】明細が更新され、TOTALが再計算されました。
【15】今更新したレコードをクリックします。
＊更新、削除を行う前は必ず操作の対象となる明細をクリックしなければなりません。
【16】「明細削除」ボタンをクリックします。
【17】明細が削除され、TOTALが再計算されました。
【18】伝票選択ボックスで他の伝票に切り替え、TOTALが正しく表示されているか確認してください。
【解説】
(1)html側にはTOTALを表示する場所をマークしただけです。
<div id="totalDisplay"></div>
(2)TOTALを表示するために関数totalDisplay()を作りました。このSQL文については次回詳しく解説します。
(3)TOTALの再計算が必要なのは、伝票を切り替えた時や追加・更新・削除で明細に変化があった時です。変化があったときは必ず明細が再表示されます。そのため関数totalDisplay()を呼び出す場所は、関数detailsDisplay()の中にしました。
function detailsDisplay() {
省略
totalDisplay();
}
(4)TOTALをクリアしていたほうがよい場所です。
function slipChange(obj) {
if(obj.selectedIndex==0){
省略
document.getElementById("totalDisplay").innerHTML = "";
省略
}else{
省略
}
(5)追加の場合は問題ないのですが、更新、削除は明細選択ボックスで選択したレコードが操作対象となります。明細選択ボックスは、伝票を切り替えた時や追加・更新・削除するたびに再作成されるので、更新、削除する前に必ず明細をクリックする必要があります。
