Step42・解答販売伝票: JavaScript初心者入門講座

解答販売伝票

前回出題した販売伝票の解答を掲載します。今回のポイントは伝票選択ボックスの表示や、CST_CDから顧客の住所を表示しているところです。

自分でできなかった方は解答とくらべてみてください。

【1】以下のように slip.html、slip.css、slip.js を作成します。base.css と database.js は前回までと共通です。

slip.html

slip.css

特にありませんので、必要があれば好みでCSSをデザインしてください。

slip.js

var slipCd;

var txtSlipCd;
var txtSlipDate;
var txtCstCd;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtSlipCd = document.getElementById("txtSlipCd");
  txtSlipDate = document.getElementById("txtSlipDate");
  txtCstCd = document.getElementById("txtCstCd");

  txtSlipCd.onfocus = function (){focus(this);}
  txtSlipCd.onblur = function (){blur(this);}
  txtSlipDate.onfocus = function (){focus(this);}
  txtSlipDate.onblur = function (){blur(this);}
  txtCstCd.onfocus = function (){focus(this);}
  txtCstCd.onblur = function (){blur(this);}

  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}
  document.getElementById("linkMaxCd").onclick = function (){return maxCd();}

  dbConnect();
  slipDisplay();
}

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;
  document.getElementById("selectSlip").onchange = function (){slipChange(this);}

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClear();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    slipCd = Number(obj.value);
    var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";
    mySql = mySql +"from T07Slip,T04Customer ";
    mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";
    mySql = mySql +"and SLIP_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    txtSlipCd.value = recordSet(0);
    txtSlipDate.value = dateFormat(recordSet(1));
    txtCstCd.value = recordSet(2);

    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);

    recordSet.Close();
    recordSet = null;

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}

function maxCd(){
  //最大値を取得する関数
  var mySql = "select max(SLIP_CD) from T07Slip";
  var recordSet = database.Execute(mySql);
  textClear();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  txtSlipCd.value = recordSet(0) + 1;
  txtSlipDate.focus();
  return false;
}

function textClear() {
  //テキストボックスをクリアする関数
  txtSlipCd.value = "";
  txtSlipDate.value = "";
  txtCstCd.value = "";
}

function dataInsert() {
  //データを追加する関数
  try{
    if(dataCheck(1)){
      var mySql = "insert into T07Slip values(" ;
      mySql = mySql + Number(txtSlipCd.value) + ", '";
      mySql = mySql + txtSlipDate.value + "', ";
      mySql = mySql + Number(txtCstCd.value);
      mySql = mySql +")";

      sqlDisplay(mySql);
      database.Execute(mySql);
      slipDisplay();
      alert("追加しました。");

    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}

function dataUpdate() {
  //データを更新する関数
  if(dataCheck(1)){
    var mySql = "update T07Slip set ";
    mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";
    mySql = mySql + "CST_CD = " + Number(txtCstCd.value);
    mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    slipDisplay();
    alert("更新しました。");
  }
}

function dataDelete() {
  //データを削除する関数
  if(!confirm("本当に削除しますか？")){
    return ;
  }

  if(dataCheck(0)){
    var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClear();
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    alert("削除しました。");
  }
}

function dataCheck(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";

  if (txtSlipCd.value == "") {
    alert("SLIP_CD" + tempStr);
    return false;
  }
  if (txtSlipCd.value.match(/[^0-9]/)) {
    alert("SLIP_CDには半角数字を入力してください！");
    txtSlipCd.focus();
    return false;
  }
  if (flag == 1 && txtSlipDate.value == "") {
    alert("SLIP_DATE" + tempStr);
    return false;
  }
  if (flag == 1 && !txtSlipDate.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
    alert("SLIP_DATEは「yyyy/mm/dd」形式で入力してください！");
    return false;
  }
  if (flag == 1 && txtCstCd.value == "") {
    alert("CST_CD" + tempStr);
    return false;
  }
  if (flag == 1 && txtCstCd.value.match(/[^0-9]/)) {
    alert("CST_CDには半角数字を入力してください！");
    txtCstCd.focus();
    return false;
  }

  return true;
}

【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。
★slip.html、base.css、slip.css、database.js、slip.js は必ず同じフォルダ内に置いてください。

【3】追加、修正、削除を行い動作を確認してください。

【解説】

(1)伝票選択ボックス
選択ボックスのテキスト部分は自由に表示することができます。今回は文字列とレコードセットの値を上手く組み合わせています。以前に作成した関数dateFormat()は日付の書式を「yyyy/mm/dd」にして返します。

tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "</option>\n";

(2)関数slipChange()のSQL文
テーブルT07Slipのデータを表示するだけならこれでかまいませんが、
var mySql = "select * from T07Slip where SLIP_CD = " + obj.value ;

住所を表示するには、テーブルT07SlipのCST_CDをT04CustomerのCST_CDと関連付けて、TOWN_CDとADDRESSを取得する必要があるため、以下のようなSQL文になります。
var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";
mySql = mySql +"from T07Slip,T04Customer ";
mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";
mySql = mySql +"and SLIP_CD = " + obj.value ;

＊SQL文についてはAccess SQL初心者入門講座で詳しく解説しています。

(3)住所表示
以前に作成した関数addressRefer()は引数にTOWN_CDを指定すると、郵便番号を含む住所を返します。そのあとにADDRESSを加えると住所が表示できます。
document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);

＊引数のdatabaseはinit()で開いたデータベースの参照です。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

解答 販売伝票

解答販売伝票