JavaScript初心者入門講座 http://java-script.seesaa.net/ JavaScriptのサンプルを使って簡単な基礎から、データベースの操作まで学べる初心者向けの入門講座です。関数の作り方やJavaScriptを外部ファイルとして読み込む方法、フォームのデータを正規表現でチェックする方法、イベントの設定方法、配列の使い方などが学べます。 ja http://blogs.law.harvard.edu/tech/rss JavaScriptのサンプルを使って簡単な基礎から、データベースの操作まで学べる初心者向けの入門講座です。関数の作り方やJavaScriptを外部ファイルとして読み込む方法、フォームのデータを正規表現でチェックする方法、イベントの設定方法、配列の使い方などが学べます。 JavaScrip,サンプル,初心者,入門,講座 JavaScript入門 no http://java-script.seesaa.net/article/445659864.html JavaScriptとUnityでゲームが作れる。 Sat, 07 Jan 2017 13:21:19 +0900 JavaScriptで本格的なゲームを作ることができます。しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応したゲームが作れます。例えば、・AndroidやiPhoneなどのスマートフォン用・WindowsやmacOS、Linuxなどのパソコン用・ウェブブラウザ用・PlayStationやXbox、Wiiなどのゲーム機用他にも多種多様です。また最近注目されているVR(バーチャルリアリティー)やAR(拡張現実)に対応したアプリも開発できま.. javaScriptとUnity 実際にはVisual Studioでプログラムを書きます。 javaScriptとUnity ゲームエンジンとは、ゲーム開発でよく使われる機能(物理計算、照明、影、メニュー遷移など)を、誰でも簡単に使えるようにした開発環境です。 Unityはゲーム作りの統合開発環境とも言えます。 普通、JavaScriptのイメージというと、 Webブラウザ上で動作するプログラミング言語として使われていることですよね。 JavaScriptはAjaxの中核技術でもあり、 HTML5と組み合わせると、Webブラウザ上で動作するアプリケーションソフト、またはゲームが作れます。 しかしUnityを使うことで、JavaScriptの可能性と言うか、展開が一気に広がるわけです。 一度作ってしまえば、Unityが各プラットフォームに対応したファイルを自動的に書き出してくれるからです。 こんな感じで、選択するだけでビルドできてしまいます。 javaScriptとUnity だから開発者であるプログラマーは、ゲームを動作させるプラットフォームのことを考える必要はありません。 アイデアやプログラミングに集中することができます。 最近はAndroidやiPhoneなどのスマートフォン向けのアプリ、ゲームの開発が流行っていますよね。 それが同じプログラムで、しかも使い慣れたJavaScriptでもプログラミングできるのですから嬉しいのです。 これまでに学んだJavaScriptの知識を活用できる範囲が、とても広がったわけですね。 創作意欲が湧いてきます。 ]]> JavaScriptで本格的なゲームを作ることができます。

しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応したゲームが作れます。

例えば、
・AndroidやiPhoneなどのスマートフォン用
・WindowsやmacOS、Linuxなどのパソコン用
・ウェブブラウザ用
・PlayStationやXbox、Wiiなどのゲーム機用
他にも多種多様です。

また最近注目されているVR(バーチャルリアリティー)やAR(拡張現実)に対応したアプリも開発できます。

何故JavaScriptで作れるのか？
その仕組みを説明しましょうｗ

なぜならゲームエンジンで有名なUnityでは、
プログラミング言語として、JavaScriptが使えるからです。

開発するプログラミング言語を選び、
javaScriptとUnity

実際にはVisual Studioでプログラムを書きます。
javaScriptとUnity

ゲームエンジンとは、ゲーム開発でよく使われる機能(物理計算、照明、影、メニュー遷移など)を、誰でも簡単に使えるようにした開発環境です。

Unityはゲーム作りの統合開発環境とも言えます。

普通、JavaScriptのイメージというと、
Webブラウザ上で動作するプログラミング言語として使われていることですよね。

JavaScriptはAjaxの中核技術でもあり、
HTML5と組み合わせると、Webブラウザ上で動作するアプリケーションソフト、またはゲームが作れます。

しかしUnityを使うことで、JavaScriptの可能性と言うか、展開が一気に広がるわけです。

一度作ってしまえば、Unityが各プラットフォームに対応したファイルを自動的に書き出してくれるからです。

こんな感じで、選択するだけでビルドできてしまいます。
javaScriptとUnity

だから開発者であるプログラマーは、ゲームを動作させるプラットフォームのことを考える必要はありません。

アイデアやプログラミングに集中することができます。

最近はAndroidやiPhoneなどのスマートフォン向けのアプリ、ゲームの開発が流行っていますよね。

それが同じプログラムで、しかも使い慣れたJavaScriptでもプログラミングできるのですから嬉しいのです。

これまでに学んだJavaScriptの知識を活用できる範囲が、とても広がったわけですね。

創作意欲が湧いてきます。

]]> JavaScriptでゲームが作れる JavaScript入門 blog:http://blog.seesaa.jp,java-script/445659864 http://java-script.seesaa.net/article/432228715.html JavaScriptで出来ることとは？まとめました。 Thu, 07 Jan 2016 11:46:17 +0900 JavaScriptで何ができるのか？まとめてみました。プログラミング言語のJavaScriptは、意外といろんな事ができるんです。・Webブラウザ上で動作するJavaScriptは、Webブラウザ上で実行できるプログラミング言語です。ほとんどのWebブラウザが対応しています。JavaScriptを使うことで、HTMLだけで作るより、とても便利な画面になります。プログラミング言語ですから、計算などの処理をして表示することはもちろん、デザインを操作したり、動きを加えたり、様々な.. ]]> JavaScriptで何ができるのか？まとめてみました。

プログラミング言語のJavaScriptは、意外といろんな事ができるんです。

・Webブラウザ上で動作する
JavaScriptは、Webブラウザ上で実行できるプログラミング言語です。

ほとんどのWebブラウザが対応しています。

JavaScriptを使うことで、HTMLだけで作るより、とても便利な画面になります。

プログラミング言語ですから、計算などの処理をして表示することはもちろん、

デザインを操作したり、動きを加えたり、様々なことが可能になります。

上記が最も一般的な使われ方でしょう。

・Ajaxの中核技術
今ではほとんどのWebアプリケーション画面でAjaxが活用されています。

JavaScriptは、まさにAjaxの中核技術です。

HTML、CSSとともに欠かせない技術となっています。

プログラミング言語のJavaScriptだけでも様々な処理が可能ですが、

さらにjQueryなどのフレームワークを利用することで、
Webブラウザごとの差異を吸収したり、プログラムを簡単に書くことができます。

複雑な処理でも、簡潔にプログラミングできるのが最大のメリットです。

と、ここまでは一般的によく知られている使われ方です。

ここからが本番ｗ

・データベースに接続できる
実はJavaScriptは、データベースに接続できるんです。

この入門講座でも、その使い方をメインで取り上げています。

IE(インターネットエクスプローラー)のActiveXObjectとWindowsのODBCデータソースを使うことで、

Microsoft社のAccess(アクセス)やOracle(オラクル)などのリレーショナルデータベースにも接続することが出来ます。

もちろん、データベースに対して、追加、修正、削除などの処理が実行可能です。

Webブラウザからデータベースを操作できると、

活用範囲がグッと広がるのでとても便利です。

]]> JavaScriptで出来ること JavaScript入門 blog:http://blog.seesaa.jp,java-script/432228715 http://java-script.seesaa.net/article/410598641.html JavaScriptは、いろんな可能性を秘めているプログラミング言語です。 Sat, 13 Dec 2014 23:29:14 +0900 JavaScript言語には、まだまだ凄い可能性があります。JavaScriptと言えば、Webアプリケーションの画面で、操作が便利になるように、補助的な機能を加えることに使われるイメージがあります。またはAjaxの中核技術というイメージでしょうか。どちらかと言うと、脇役のプログラミング言語という感じでした。本当はすごいんですけどねｗこのJavaScript入門講座では、テーマとして、あえて伝票管理という業務システムを取り上げています。それは何故か？普通にJavaScript.. ]]> JavaScript言語には、まだまだ凄い可能性があります。

JavaScriptと言えば、Webアプリケーションの画面で、

操作が便利になるように、補助的な機能を加えることに使われるイメージがあります。

またはAjaxの中核技術というイメージでしょうか。

どちらかと言うと、脇役のプログラミング言語という感じでした。

本当はすごいんですけどねｗ

このJavaScript入門講座では、テーマとして、

あえて伝票管理という業務システムを取り上げています。

それは何故か？

普通にJavaScriptの入門講座を作ったのでは、

ありきたりな使われ方しか学べないからです。

それはJavaScriptの一面、可能性の一部でしかありません。

私は、「もっとJavaScriptは凄いんだ！」という可能性を知って欲しいのです。

JavaScriptは、この講座で紹介しているような主役的な使い方もできます。

また、意外と簡単にデータベースに接続することもできるので、

アイデア次第で、可能性は無限に広がります。

JavaScriptは、Webブラウザ上で動作するプログラミング言語なので、

使う時はインターネットがつながっているはずです。

ということは、ネット上の情報に簡単にアクセスできます。

その情報をデータベースに蓄積したり、加工できれば・・・

どうですか？

いろんな使い方ができそうですよね。

とはいっても初心者向けの入門講座ですから、

JavaScriptの基本からしっかり教えています。

業務システムをWebブラウザで作ることで、

JavaScriptの基本から応用まで、広く学べるように工夫しています。

]]> JavaScriptの可能性は凄い JavaScript入門 blog:http://blog.seesaa.jp,java-script/410598641 http://java-script.seesaa.net/article/45707408.html 販売伝票 プログラムの解説 Sat, 23 Jun 2007 18:23:44 +0900 伝票と明細は別々に作ってきたので、それぞれのプログラムは独立しています。そこでプログラムを別々に読み込み、全体として上手く動くように調整することで、最小限の変更で済むようにしました。【slip.html】(1)slip.htmlとdetails.htmlを1つにまとめ、「slip.html」にしました。重複する部分は1つにしてあります。(2)伝票と明細は水平線で区切りました。(3)伝票の部品は「form1」の上、明細の部品は「form2」の上に配置しました。(4)head部分.. slipDetails.zip データベースをまだ入手していない方は一緒にダウンロードしてください。 SampleDB010.zip データベース「SampleDB010.mdb」はCドライブの直下に保存します。 ]]>
【slip.html】

(1)slip.htmlとdetails.htmlを1つにまとめ、「slip.html」にしました。重複する部分は1つにしてあります。

(2)伝票と明細は水平線で区切りました。

(3)伝票の部品は「form1」の上、明細の部品は「form2」の上に配置しました。

(4)head部分でdatabase.js、slip.js、details.js、base.css、slip.cssを指定しています。
<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="slip.js"></script>
<script type="text/javascript" src="details.js"></script>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="slip.css" rel="stylesheet" type="text/css


【slip.css】

(1)slip.cssとdetails.cssを1つにまとめ、「slip.css」にしました。

(2)明細の選択ボックスの幅をCSSで指定しています。
#selectDetails {
  width: 600px;
}


【slip.js】

(1)変数selectSlipをdetails.jsから移動しました。

(2)関数init()をinitSlip()に名前を変更しました。

(3)onload時に呼び出す関数は無名関数を使い、中で2つ呼び出しています。
onload = function (){initSlip();initDetails();}

(4)更新時にも確認メッセージを表示するようにしました。
if(!confirm("本当に更新しますか？")){
  return ;
}

(5)関数slipChange()を統合しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){

    //伝票側の処理
    textClearSlip();
    cstDisplay();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";

    alert("伝票を選択してください。");
  }else{
    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));
    selectCst.selectedIndex = cstIndexSearch(recordSet(2));
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);
  
    recordSet.Close();
    recordSet = null;

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    detailsDisplay();

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


(6)関数newSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。

function newSlip(){
  //伝票を新規作成する関数

  //伝票側の処理
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();

  //明細側の処理
  textClearDetails();
  goodsDisplay();
  document.getElementById("detailsDisplay").innerHTML = "";
  document.getElementById("totalDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";

  return false;
}


(7)関数dataDeleteSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。

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

  if(dataCheckSlip(0)){
    //伝票側の処理
    var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    cstDisplay();

    //明細側の処理
    var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";

    //伝票側の処理
    textClearSlip();

    alert("削除しました。");
  }
}



【details.js】

(1)変数selectSlipをslip.js側へ移動しました。

(2)onload、onunloadは削除しました。slip.js側で呼び出すためです。

(3)関数init()をinitDetails()に名前を変更しました。

(4)関数focus()、blur()、slipDisplay()はslip.jsと重複しているので削除しました。

(5)slipChange()はslip.js側に統合しました。

(6)selectSlip.valueで値を取得していた部分をtxtSlipCd.valueに変更しました。これは必ずしも伝票選択ボックスが選択されているとは限らないからです。

(7)更新時にも確認メッセージを表示するようにしました。
if(!confirm("本当に更新しますか？")){
  return ;
}

(8)明細を選択しないで更新、削除しようとするとメッセージを表示するようにしました。
if(selectDetails.value==""){
  alert("明細が選択されていません。");
  return ;
}


【まとめ】

一番大きな変更はslip.js側の関数slipChange()、newSlip()、dataDeleteSlip()です。これらの変更は伝票側の操作が明細へ影響することがあり、調整が必要だからです。

関数dataDeleteSlip()では伝票側の処理をわざわざ分けていますが、テキストボックスのクリアが明細に影響するので、先に明細の処理を行っています。

あとは全体の動きを確認しながら、プログラムの順番を入れ替えたり微調整しています。


【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。


]]> Step55・販売伝票 プログラムの解説 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45707408 http://java-script.seesaa.net/article/45700813.html 販売伝票 動作確認 Sat, 23 Jun 2007 16:46:21 +0900 伝票と明細を結合したシステムが上手く動くか動作を確認してみましょう。【1】slip.html をダブルクリックしてWebブラウザで開きます。★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。【2】販売伝票が表示されました。伝票と明細が1つの画面に表示されています。水平線の上が伝票で下が明細です。【3】伝票選択ボックスで、伝票番号「10」を選択します。【4】伝票番号「10.. javascript-248.gif 【3】伝票選択ボックスで、伝票番号「10」を選択します。 javascript-249.gif 【4】伝票番号「10」のデータが表示されました。 javascript-250.gif 【5】次は伝票選択ボックスで、伝票番号「23」を選択します。 javascript-251.gif 【6】伝票番号「23」のデータが表示されました。 javascript-252.gif 【7】「伝票新規」をクリックします。 javascript-253.gif 【8】SLIP_CDに最大値にプラス1した値が自動で入力されます。 javascript-254.gif 【9】SLIP_DATEに日付を入力します。 javascript-255.gif 【10】顧客を選択します。 javascript-256.gif 【11】住所が自動で表示されました。 javascript-257.gif 【12】「伝票追加」ボタンをクリックします。 javascript-258.gif 【13】伝票が追加されました。 javascript-259.gif 【14】SLIP_DATEとCST_CDを変更します。 javascript-260.gif 【15】「伝票更新」ボタンをクリックします。 javascript-261.gif 【16】確認のメッセージが表示されるので、「OK」をクリックします。 javascript-262.gif 【17】伝票が更新されました。 javascript-263.gif 【18】「明細新規」をクリックします。 javascript-264.gif 【19】商品選択ボックスにフォーカスが移動しました。 javascript-265.gif 【20】商品を選択します。 javascript-266.gif 【21】AMOUNTとMEMOを入力します。 javascript-267.gif 【22】「明細追加」ボタンをクリックします。 javascript-268.gif 【23】明細が追加されました。 javascript-269.gif 【24】そのまま「明細更新」ボタンをクリックします。 javascript-270.gif 【25】明細を選択しないで更新しようとしたので、メッセージが表示されました。 javascript-271.gif 【26】今度は明細を選択します。明細のデータが上に反映します。 javascript-272.gif 【27】GOODS_CD、AMOUNT、MEMOを変更して、「明細更新」ボタンをクリックします。 javascript-273.gif 【28】確認のメッセージが表示されるので、「OK」をクリックします。 javascript-274.gif 【29】明細が更新されました。 javascript-275.gif 【30】明細にレコードを3件以上追加してください。 javascript-276.gif 【31】明細の一番下のレコードを選択します。 javascript-277.gif 【32】「明細削除」ボタンをクリックします。 javascript-278.gif 【33】確認のメッセージが表示されるので、「OK」をクリックします。 javascript-279.gif 【34】明細が削除されました。 javascript-280.gif 【35】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、新しく作成した伝票に対応する明細が表示されています。 javascript-281.gif これから伝票を削除すると対応する明細も全て削除されることを確認します。 【36】「伝票削除」ボタンをクリックします。 javascript-282.gif 【37】確認のメッセージが表示されるので、「OK」をクリックします。 javascript-283.gif 【38】伝票が削除されました。 javascript-284.gif 【39】明細の表示も消えています。 javascript-285.gif 【40】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、伝票に対応していた明細が全て削除されていることがわかります。 javascript-286.gif 【ポイント】 (1)伝票にあるSLIP_CDは「伝票新規の時にだけ変更」できます。いったん伝票を作成したらそれ以降は表示されている値を変更しないでください。伝票の更新・削除や明細の追加はこの伝票番号を使っているので、変更すると不具合が出ます。 (2)明細の更新、削除は明細を選択してからでないと行えません。 (3)伝票を削除すると、対応している明細も削除するようにプログラムしています。 【販売伝票のダウンロード】 伝票と明細を結合した完成版です。 slipDetails.zip データベースをまだ入手していない方は一緒にダウンロードしてください。 SampleDB010.zip データベース「SampleDB010.mdb」はCドライブの直下に保存します。 ]]>
【1】slip.html をダブルクリックしてWebブラウザで開きます。

★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。


【2】販売伝票が表示されました。伝票と明細が1つの画面に表示されています。水平線の上が伝票で下が明細です。

javascript-248.gif


【3】伝票選択ボックスで、伝票番号「10」を選択します。

javascript-249.gif


【4】伝票番号「10」のデータが表示されました。

javascript-250.gif


【5】次は伝票選択ボックスで、伝票番号「23」を選択します。

javascript-251.gif


【6】伝票番号「23」のデータが表示されました。

javascript-252.gif


【7】「伝票新規」をクリックします。

javascript-253.gif


【8】SLIP_CDに最大値にプラス1した値が自動で入力されます。

javascript-254.gif


【9】SLIP_DATEに日付を入力します。

javascript-255.gif


【10】顧客を選択します。

javascript-256.gif


【11】住所が自動で表示されました。

javascript-257.gif


【12】「伝票追加」ボタンをクリックします。

javascript-258.gif


【13】伝票が追加されました。

javascript-259.gif


【14】SLIP_DATEとCST_CDを変更します。

javascript-260.gif


【15】「伝票更新」ボタンをクリックします。

javascript-261.gif


【16】確認のメッセージが表示されるので、「OK」をクリックします。

javascript-262.gif


【17】伝票が更新されました。

javascript-263.gif


【18】「明細新規」をクリックします。

javascript-264.gif


【19】商品選択ボックスにフォーカスが移動しました。

javascript-265.gif


【20】商品を選択します。

javascript-266.gif


【21】AMOUNTとMEMOを入力します。

javascript-267.gif


【22】「明細追加」ボタンをクリックします。

javascript-268.gif


【23】明細が追加されました。

javascript-269.gif


【24】そのまま「明細更新」ボタンをクリックします。

javascript-270.gif


【25】明細を選択しないで更新しようとしたので、メッセージが表示されました。

javascript-271.gif


【26】今度は明細を選択します。明細のデータが上に反映します。

javascript-272.gif


【27】GOODS_CD、AMOUNT、MEMOを変更して、「明細更新」ボタンをクリックします。

javascript-273.gif


【28】確認のメッセージが表示されるので、「OK」をクリックします。

javascript-274.gif


【29】明細が更新されました。

javascript-275.gif


【30】明細にレコードを3件以上追加してください。

javascript-276.gif


【31】明細の一番下のレコードを選択します。

javascript-277.gif


【32】「明細削除」ボタンをクリックします。

javascript-278.gif


【33】確認のメッセージが表示されるので、「OK」をクリックします。

javascript-279.gif


【34】明細が削除されました。

javascript-280.gif


【35】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、新しく作成した伝票に対応する明細が表示されています。

javascript-281.gif

これから伝票を削除すると対応する明細も全て削除されることを確認します。


【36】「伝票削除」ボタンをクリックします。

javascript-282.gif


【37】確認のメッセージが表示されるので、「OK」をクリックします。

javascript-283.gif


【38】伝票が削除されました。

javascript-284.gif


【39】明細の表示も消えています。

javascript-285.gif


【40】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、伝票に対応していた明細が全て削除されていることがわかります。

javascript-286.gif


【ポイント】

(1)伝票にあるSLIP_CDは「伝票新規の時にだけ変更」できます。いったん伝票を作成したらそれ以降は表示されている値を変更しないでください。伝票の更新・削除や明細の追加はこの伝票番号を使っているので、変更すると不具合が出ます。


(2)明細の更新、削除は明細を選択してからでないと行えません。


(3)伝票を削除すると、対応している明細も削除するようにプログラムしています。


【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。


]]> Step54・販売伝票 動作確認 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45700813 http://java-script.seesaa.net/article/45634352.html 販売伝票 結合 Fri, 22 Jun 2007 22:24:48 +0900 いよいよ販売伝票の仕上げです。これまで別々に作ってきた伝票（slip）と明細（Details）を一つにまとめます。結構本格的なシステムになってきましたね。完成図【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。slipDetails.zipからダウンロードすることもできます。slip.html&lt;html&gt;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;.. javascript-247.gif 【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。slipDetails.zipからダウンロードすることもできます。 slip.html <html>   <head>     <script type="text/javascript" src="database.js"></script>     <script type="text/javascript" src="slip.js"></script>     <script type="text/javascript" src="details.js"></script>     <link href="base.css" rel="stylesheet" type="text/css">     <link href="slip.css" rel="stylesheet" type="text/css">     <title>slip</title>   </head>   <body>     販売伝票     <span id="slipDisplay"></span><br />     <br />     <a href="" name="linkNewSlip" id="linkNewSlip">伝票新規</a>     <form name="form1">       <p>         <input type="button" name="btnInsertSlip" id="btnInsertSlip" value="伝票追加">         <input type="button" name="btnUpdateSlip" id="btnUpdateSlip" value="伝票更新">         <input type="button" name="btnDeleteSlip" id="btnDeleteSlip" value="伝票削除">       </p>       SLIP_CD:<input type="text" name="txtSlipCd" id="txtSlipCd">       SLIP_DATE:<input type="text" name="txtSlipDate" id="txtSlipDate">       CST_CD:<span id="customerDisplay"></span>     </form>     <span id="addressDisplay"></span>     <br />     <hr />     <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> slip.css #selectDetails {   width: 600px; } slip.js var txtSlipCd; var txtSlipDate; var selectSlip; var selectCst; onload = function (){initSlip();initDetails();} onunload = dbClose; function initSlip() {   //初期設定をする関数   txtSlipCd = document.getElementById("txtSlipCd");   txtSlipDate = document.getElementById("txtSlipDate");   txtSlipCd.onfocus = function (){focus(this);}   txtSlipCd.onblur = function (){blur(this);}   txtSlipDate.onfocus = function (){focus(this);}   txtSlipDate.onblur = function (){blur(this);}   document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}   document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}   document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}   document.getElementById("linkNewSlip").onclick = function (){return newSlip();}   dbConnect();   slipDisplay();   cstDisplay(); } 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){     //伝票側の処理     textClearSlip();     cstDisplay();     document.getElementById("addressDisplay").innerHTML = "";     document.getElementById("sqlDisplay").innerHTML = "";     //明細側の処理     textClearDetails();     goodsDisplay();     document.getElementById("detailsDisplay").innerHTML = "";     document.getElementById("totalDisplay").innerHTML = "";     document.getElementById("sqlDisplay").innerHTML = "";     alert("伝票を選択してください。");   }else{     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));     selectCst.selectedIndex = cstIndexSearch(recordSet(2));     document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);        recordSet.Close();     recordSet = null;     //明細側の処理     textClearDetails();     goodsDisplay();     detailsDisplay();     sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);   } } function cstDisplay() {   //顧客を表示する関数   var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";   var recordSet = database.Execute(mySql);   document.getElementById("customerDisplay").innerHTML = "";   var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\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("customerDisplay").innerHTML = tempHtml;   selectCst = document.getElementById("selectCst");   selectCst.onchange = function (){cstChange(this);}   recordSet.Close();   recordSet = null; } function cstChange(obj) {   //顧客を選択した時の関数   if(obj.selectedIndex==0){     document.getElementById("addressDisplay").innerHTML = "";     document.getElementById("sqlDisplay").innerHTML = "";     alert("顧客を選択してください。");   }else{     var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;     var recordSet = database.Execute(mySql);        document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);        recordSet.Close();     recordSet = null;        sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);   } } function sqlDisplay(_mySql) {   //SQLを表示する関数   document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>"; } function newSlip(){   //伝票を新規作成する関数   //伝票側の処理   textClearSlip();   document.getElementById("addressDisplay").innerHTML = "";   document.getElementById("sqlDisplay").innerHTML = "";   slipDisplay();   cstDisplay();   txtSlipCd.value = maxCdSlip() + 1;   txtSlipDate.focus();   //明細側の処理   textClearDetails();   goodsDisplay();   document.getElementById("detailsDisplay").innerHTML = "";   document.getElementById("totalDisplay").innerHTML = "";   document.getElementById("sqlDisplay").innerHTML = "";   return false; } function maxCdSlip(){   //SLIP_CDの最大値を取得する関数   var mySql = "select max(SLIP_CD) from T07Slip";   var recordSet = database.Execute(mySql);   var maxCd = recordSet(0);   return maxCd; } function textClearSlip() {   //テキストボックスをクリアする関数   txtSlipCd.value = "";   txtSlipDate.value = ""; } function dataInsertSlip() {   //データを追加する関数   try{     if(dataCheckSlip(1)){       var mySql = "insert into T07Slip values(" ;       mySql = mySql + Number(txtSlipCd.value) + ", '";       mySql = mySql + txtSlipDate.value + "', ";       mySql = mySql + Number(selectCst.value);       mySql = mySql +")";       sqlDisplay(mySql);       database.Execute(mySql);       slipDisplay();       alert("追加しました。");     }   }catch(error){     alert(error.number + "\n" + error.description);   } } function dataUpdateSlip() {   //データを更新する関数   if(!confirm("本当に更新しますか？")){     return ;   }   if(dataCheckSlip(1)){     var mySql = "update T07Slip set ";     mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";     mySql = mySql + "CST_CD = " + Number(selectCst.value);     mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);     sqlDisplay(mySql);     database.Execute(mySql);     slipDisplay();     alert("更新しました。");   } } function dataDeleteSlip() {   //データを削除する関数   if(!confirm("本当に削除しますか？")){     return ;   }   if(dataCheckSlip(0)){     //伝票側の処理     var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);     sqlDisplay(mySql);     database.Execute(mySql);     document.getElementById("addressDisplay").innerHTML = "";     slipDisplay();     cstDisplay();     //明細側の処理     var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);     sqlDisplay(mySql);     database.Execute(mySql);     textClearDetails();     goodsDisplay();     document.getElementById("detailsDisplay").innerHTML = "";     document.getElementById("totalDisplay").innerHTML = "";     //伝票側の処理     textClearSlip();     alert("削除しました。");   } } function dataCheckSlip(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 && selectCst.value == 0) {     alert("CST_CD" + "は必ず選択してください。");     return false;   }   return true; } function cstIndexSearch(cstCd){   //顧客選択ボックスのIndexを検索する関数   var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";   var recordSet = database.Execute(mySql);   var cstIndex = recordSet(0);   return cstIndex; } details.js var txtAmount; var txtMemo; var selectGoods; function initDetails() {   //初期設定をする関数   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 detailsDisplay() {   //明細を表示する関数   var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";   mySql = mySql + "from T08Details,T06Goods ";   mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";   mySql = mySql + "and SLIP_CD = " + txtSlipCd.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 + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);     tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);     tempHtml = tempHtml + " [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(txtSlipCd.value) + ",";       mySql = mySql + Number(selectGoods.value) + ",";       mySql = mySql + Number(txtAmount.value) + ", '";       mySql = mySql + txtMemo.value + "'";       mySql = mySql +")";       sqlDisplay(mySql);       database.Execute(mySql);       textClearDetails();       goodsDisplay();       detailsDisplay();       alert("追加しました。");     }   }catch(error){     alert(error.number + "\n" + error.description);   } } function dataUpdateDetails() {   //データを更新する関数   if(selectDetails.value==""){     alert("明細が選択されていません。");     return ;   }   if(!confirm("本当に更新しますか？")){     return ;   }   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);     textClearDetails();     goodsDisplay();     detailsDisplay();     alert("更新しました。");   } } function dataDeleteDetails() {   //データを削除する関数   if(selectDetails.value==""){     alert("明細が選択されていません。");     return ;   }   if(!confirm("本当に削除しますか？")){     return ;   }   if(dataCheckDetails(0)){     var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);     sqlDisplay(mySql);     database.Execute(mySql);     textClearDetails();     goodsDisplay();     detailsDisplay();     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 = " + txtSlipCd.value;   var recordSet = database.Execute(mySql);   var tempHtml = "TOTAL:" + recordSet(0) + "円";   document.getElementById("totalDisplay").innerHTML = tempHtml;   recordSet.Close();   recordSet = null; } 【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。 ★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。 【販売伝票のダウンロード】 伝票と明細を結合した完成版です。 slipDetails.zip データベースをまだ入手していない方は一緒にダウンロードしてください。 SampleDB010.zip データベース「SampleDB010.mdb」はCドライブの直下に保存します。 ]]>
完成図
javascript-247.gif


【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。slipDetails.zipからダウンロードすることもできます。

slip.html

<html>
  <head>
    <script type="text/javascript" src="database.js"></script>
    <script type="text/javascript" src="slip.js"></script>
    <script type="text/javascript" src="details.js"></script>
    <link href="base.css" rel="stylesheet" type="text/css">
    <link href="slip.css" rel="stylesheet" type="text/css">
    <title>slip</title>
  </head>
  <body>
    販売伝票
    <span id="slipDisplay"></span><br />
    <br />
    <a href="" name="linkNewSlip" id="linkNewSlip">伝票新規</a>
    <form name="form1">
      <p>
        <input type="button" name="btnInsertSlip" id="btnInsertSlip" value="伝票追加">
        <input type="button" name="btnUpdateSlip" id="btnUpdateSlip" value="伝票更新">
        <input type="button" name="btnDeleteSlip" id="btnDeleteSlip" value="伝票削除">
      </p>
      SLIP_CD:<input type="text" name="txtSlipCd" id="txtSlipCd">
      SLIP_DATE:<input type="text" name="txtSlipDate" id="txtSlipDate">
      CST_CD:<span id="customerDisplay"></span>
    </form>
    <span id="addressDisplay"></span>
    <br />
    <hr />
    <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>



slip.css

#selectDetails {
  width: 600px;
}



slip.js

var txtSlipCd;
var txtSlipDate;
var selectSlip;
var selectCst;

onload = function (){initSlip();initDetails();}
onunload = dbClose;

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

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

  document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}
  document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}
  document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}
  document.getElementById("linkNewSlip").onclick = function (){return newSlip();}

  dbConnect();
  slipDisplay();
  cstDisplay();
}


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){

    //伝票側の処理
    textClearSlip();
    cstDisplay();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";

    alert("伝票を選択してください。");
  }else{
    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));
    selectCst.selectedIndex = cstIndexSearch(recordSet(2));
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);
  
    recordSet.Close();
    recordSet = null;

    //明細側の処理
    textClearDetails();
    goodsDisplay();
    detailsDisplay();

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


function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("customerDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\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("customerDisplay").innerHTML = tempHtml;
  selectCst = document.getElementById("selectCst");
  selectCst.onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}


function cstChange(obj) {
  //顧客を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }else{
    var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);
  
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);
  
    recordSet.Close();
    recordSet = null;
  
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}


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


function newSlip(){
  //伝票を新規作成する関数

  //伝票側の処理
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();

  //明細側の処理
  textClearDetails();
  goodsDisplay();
  document.getElementById("detailsDisplay").innerHTML = "";
  document.getElementById("totalDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";

  return false;
}


function maxCdSlip(){
  //SLIP_CDの最大値を取得する関数
  var mySql = "select max(SLIP_CD) from T07Slip";
  var recordSet = database.Execute(mySql);
  var maxCd = recordSet(0);
  return maxCd;
}


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


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

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

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


function dataUpdateSlip() {
  //データを更新する関数
  if(!confirm("本当に更新しますか？")){
    return ;
  }
  if(dataCheckSlip(1)){
    var mySql = "update T07Slip set ";
    mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";
    mySql = mySql + "CST_CD = " + Number(selectCst.value);
    mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    slipDisplay();
    alert("更新しました。");
  }
}


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

  if(dataCheckSlip(0)){
    //伝票側の処理
    var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    cstDisplay();

    //明細側の処理
    var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("totalDisplay").innerHTML = "";

    //伝票側の処理
    textClearSlip();

    alert("削除しました。");
  }
}


function dataCheckSlip(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 && selectCst.value == 0) {
    alert("CST_CD" + "は必ず選択してください。");
    return false;
  }

  return true;
}


function cstIndexSearch(cstCd){
  //顧客選択ボックスのIndexを検索する関数
  var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";
  var recordSet = database.Execute(mySql);
  var cstIndex = recordSet(0);
  return cstIndex;
}



details.js

var txtAmount;
var txtMemo;
var selectGoods;


function initDetails() {
  //初期設定をする関数
  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 detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + txtSlipCd.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 + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);
    tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);
    tempHtml = tempHtml + " [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(txtSlipCd.value) + ",";
      mySql = mySql + Number(selectGoods.value) + ",";
      mySql = mySql + Number(txtAmount.value) + ", '";
      mySql = mySql + txtMemo.value + "'";
      mySql = mySql +")";

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

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


function dataUpdateDetails() {
  //データを更新する関数
  if(selectDetails.value==""){
    alert("明細が選択されていません。");
    return ;
  }
  if(!confirm("本当に更新しますか？")){
    return ;
  }
  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);
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    alert("更新しました。");
  }
}


function dataDeleteDetails() {
  //データを削除する関数
  if(selectDetails.value==""){
    alert("明細が選択されていません。");
    return ;
  }
  if(!confirm("本当に削除しますか？")){
    return ;
  }
  if(dataCheckDetails(0)){
    var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    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 = " + txtSlipCd.value;
  var recordSet = database.Execute(mySql);
  var tempHtml = "TOTAL:" + recordSet(0) + "円";
  document.getElementById("totalDisplay").innerHTML = tempHtml;

  recordSet.Close();
  recordSet = null;
}



【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。

★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。


【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。


]]> Step53・販売伝票 結合 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45634352 http://java-script.seesaa.net/article/45626430.html 明細 単価×数量の表示 Fri, 22 Jun 2007 20:40:47 +0900 これまで明細には「単価×数量」がありませんでした。そのままだと商品ごとの購入金額がわからないので、以下のように表示する方法を試してみましょう。明細の表示を変えるには関数detailsDisplay()の中のSQL文と、表示方法を変更するだけです。【1】以下のように details.js を更新します。他は前回までと同じです。details.htmlvar txtAmount;var txtMemo;var selectSlip;var selectGoods;onload =.. 明細の表示を変えるには関数detailsDisplay()の中のSQL文と、表示方法を変更するだけです。 【1】以下のように details.js を更新します。他は前回までと同じです。 details.html 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,GOODS_NAME,PRICE,AMOUNT,(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 + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);     tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);     tempHtml = tempHtml + " [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】明細が表示されました。 javascript-192.gif 【4】伝票選択ボックスから伝票番号「23」を選んでください。 javascript-193.gif 【5】単価×数量が表示されました。 javascript-243.gif 【解説】 (1)関数detailsDisplay()のSQL文 DETAILS_CDは表示しませんが、選択ボックスのvalueとして必要です。 select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23 order by DETAILS_CD 実行結果 javascript-245.gif (2)表示部分をいろいろ工夫すると明細がもっと見やすくなると思います。 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; } 実行結果 javascript-246.gif 【明細のダウンロード】 今回までの改良を含むDetailsです。 details2.zip データベースをまだ入手していない方は一緒にダウンロードしてください。 SampleDB010.zip データベース「SampleDB010.mdb」はCドライブの直下に保存します。 ]]>
javascript-244.gif

明細の表示を変えるには関数detailsDisplay()の中のSQL文と、表示方法を変更するだけです。

【1】以下のように details.js を更新します。他は前回までと同じです。

details.html

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,GOODS_NAME,PRICE,AMOUNT,(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 + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);
    tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);
    tempHtml = tempHtml + " [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】明細が表示されました。

javascript-192.gif


【4】伝票選択ボックスから伝票番号「23」を選んでください。

javascript-193.gif


【5】単価×数量が表示されました。

javascript-243.gif


【解説】

(1)関数detailsDisplay()のSQL文

DETAILS_CDは表示しませんが、選択ボックスのvalueとして必要です。

select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD
and SLIP_CD = 23
order by DETAILS_CD

実行結果
javascript-245.gif


(2)表示部分をいろいろ工夫すると明細がもっと見やすくなると思います。


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;
}


実行結果
javascript-246.gif


【明細のダウンロード】
今回までの改良を含むDetailsです。
details2.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。


]]> Step52・明細 単価×数量の表示 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45626430 http://java-script.seesaa.net/article/45618534.html TOTALを表示するSQL文の考え方 Fri, 22 Jun 2007 18:19:20 +0900 今回は明細のTOTAL（合計金額）を表示するためのSQL文の考え方を解説します。順番よく考えると簡単にわかります。合計金額の計算には単価と数量が必要です。【1】まずテーブルT08Detailsを確認します。このテーブルにはGOODS_CDとAMOUNT（数量）はありますが、PRICEがありません。PRICEはテーブルT06Goodsを参照する必要があります。【2】テーブルT08DetailsとT06Goodsを使い、計算に必要な最低限のフィールドだけを選択するSQL文は以下の.. javascript-238.gif 【2】テーブルT08DetailsとT06Goodsを使い、計算に必要な最低限のフィールドだけを選択するSQL文は以下のようになります。 select SLIP_CD,PRICE,AMOUNT from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD 実行結果 javascript-239.gif 【3】次は「単価×数量」の計算をして、計算結果の列名を「calc」とするSQL文です。 select SLIP_CD,PRICE,AMOUNT,(PRICE * AMOUNT) as calc from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD 実行結果 javascript-240.gif 【4】TOTALを表示するのは伝票ごとですから、SLIP_CDを抽出条件にレコードを絞りこんでみましょう。 select SLIP_CD,PRICE,AMOUNT,(PRICE * AMOUNT) as calc from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23 実行結果 javascript-241.gif 【5】最終的に必要なのは「単価×数量」の合計です。合計は「sum」を使います。ちなみに今回は別名を付けていません。別名を付けないとシステムが勝手に名前を付けます。 select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23 実行結果 javascript-242.gif このように1行1列のデータになります。この値はプログラムの中でrecordSet(0)で簡単に取得できます。0は1列目を表しています。 【6】あとはSQL文をプログラムに組み込みます。 最終的に組み立てたいSQL文です。 select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23 全体を「"」（ダブルクォーテーション）で囲みます。 "select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23" 値をコントロールや変数に置き換えます。 "select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = selectSlip.value" コントロールや変数の前後に半角空白を入れ切り離します。 "select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = selectSlip.value" コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。 "select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" selectSlip.value コントロールや変数と文字列を「+」で結合します。 "select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" + selectSlip.value 変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。 var mySql = ""select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" + selectSlip.value; 上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。今回は文字列の結合を「+=」で表してみました。 var mySql = "select sum(PRICE * AMOUNT) "; mySql += "from T08Details,T06Goods "; mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD "; mySql += "and SLIP_CD = " + selectSlip.value; ]]>
【1】まずテーブルT08Detailsを確認します。このテーブルにはGOODS_CDとAMOUNT（数量）はありますが、PRICEがありません。PRICEはテーブルT06Goodsを参照する必要があります。

javascript-238.gif


【2】テーブルT08DetailsとT06Goodsを使い、計算に必要な最低限のフィールドだけを選択するSQL文は以下のようになります。

select SLIP_CD,PRICE,AMOUNT
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD

実行結果
javascript-239.gif


【3】次は「単価×数量」の計算をして、計算結果の列名を「calc」とするSQL文です。

select SLIP_CD,PRICE,AMOUNT,(PRICE * AMOUNT) as calc
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD

実行結果
javascript-240.gif


【4】TOTALを表示するのは伝票ごとですから、SLIP_CDを抽出条件にレコードを絞りこんでみましょう。

select SLIP_CD,PRICE,AMOUNT,(PRICE * AMOUNT) as calc
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD
and SLIP_CD = 23

実行結果
javascript-241.gif


【5】最終的に必要なのは「単価×数量」の合計です。合計は「sum」を使います。ちなみに今回は別名を付けていません。別名を付けないとシステムが勝手に名前を付けます。

select sum(PRICE * AMOUNT)
from T08Details,T06Goods
where T08Details.GOODS_CD = T06Goods.GOODS_CD
and SLIP_CD = 23

実行結果
javascript-242.gif

このように1行1列のデータになります。この値はプログラムの中でrecordSet(0)で簡単に取得できます。0は1列目を表しています。


【6】あとはSQL文をプログラムに組み込みます。

最終的に組み立てたいSQL文です。
select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23

全体を「"」（ダブルクォーテーション）で囲みます。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = 23"

値をコントロールや変数に置き換えます。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = selectSlip.value"

コントロールや変数の前後に半角空白を入れ切り離します。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD = selectSlip.value"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" selectSlip.value

コントロールや変数と文字列を「+」で結合します。
"select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" + selectSlip.value

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = ""select sum(PRICE * AMOUNT) from T08Details,T06Goods where T08Details.GOODS_CD = T06Goods.GOODS_CD and SLIP_CD =" + selectSlip.value;

上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。今回は文字列の結合を「+=」で表してみました。

var mySql = "select sum(PRICE * AMOUNT) ";
mySql += "from T08Details,T06Goods ";
mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
mySql += "and SLIP_CD = " + selectSlip.value;


]]> Step51・TOTALを表示するSQL文の考え方 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45618534 http://java-script.seesaa.net/article/45610109.html 明細 合計金額を表示 Fri, 22 Jun 2007 16:55:42 +0900 今回は明細に表示されているレコードのTOTAL（合計金額）を表示する方法を解説します。合計するSQL文がわかればプログラムはそれほど難しくありません。今まで学んだ範囲でできます。【1】以下のように details.htmlとdetails.js を更新します。他は前回までと同じです。details.html&lt;html&gt;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/java.. SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。 【3】明細が表示されました。 javascript-192.gif 【4】伝票選択ボックスから伝票番号「23」を選んでください。 javascript-193.gif 【5】明細のTOTAL（合計金額）が表示されています。 javascript-225.gif 【6】念のため計算して確認してみましょう。 javascript-226.gif PRICE * AMOUNT は 単価 × 数量 とお考えください。 （129800×1) + (39800×2) = 209400 となるのでTOTALの計算は合っていますね。 【7】次はデータの追加・更新・削除を行い、TOTALがきちんと表示されることを確認してみましょう。「明細新規」をクリックします。 javascript-227.gif 【8】「デジタルカメラ」、「1」、「テスト」と入力してください。 javascript-228.gif 【9】「明細追加」ボタンをクリックします。 javascript-229.gif 【10】明細が追加され、TOTALが再計算されました。 javascript-230.gif 【11】今追加したレコードをクリックします。 javascript-231.gif ＊更新、削除を行う前は必ず操作の対象となる明細をクリックしなければなりません。 【12】AMOUNTを「2」に変更します。 javascript-232.gif 【13】「明細更新」ボタンをクリックします。 javascript-233.gif 【14】明細が更新され、TOTALが再計算されました。 javascript-234.gif 【15】今更新したレコードをクリックします。 javascript-235.gif ＊更新、削除を行う前は必ず操作の対象となる明細をクリックしなければなりません。 【16】「明細削除」ボタンをクリックします。 javascript-236.gif 【17】明細が削除され、TOTALが再計算されました。 javascript-237.gif 【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)追加の場合は問題ないのですが、更新、削除は明細選択ボックスで選択したレコードが操作対象となります。明細選択ボックスは、伝票を切り替えた時や追加・更新・削除するたびに再作成されるので、更新、削除する前に必ず明細をクリックする必要があります。 ]]>
【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】明細が表示されました。

javascript-192.gif


【4】伝票選択ボックスから伝票番号「23」を選んでください。

javascript-193.gif


【5】明細のTOTAL（合計金額）が表示されています。

javascript-225.gif


【6】念のため計算して確認してみましょう。

javascript-226.gif

PRICE * AMOUNT は 単価 × 数量 とお考えください。
（129800×1) + (39800×2) = 209400
となるのでTOTALの計算は合っていますね。


【7】次はデータの追加・更新・削除を行い、TOTALがきちんと表示されることを確認してみましょう。「明細新規」をクリックします。

javascript-227.gif


【8】「デジタルカメラ」、「1」、「テスト」と入力してください。

javascript-228.gif


【9】「明細追加」ボタンをクリックします。

javascript-229.gif


【10】明細が追加され、TOTALが再計算されました。

javascript-230.gif


【11】今追加したレコードをクリックします。

javascript-231.gif

＊更新、削除を行う前は必ず操作の対象となる明細をクリックしなければなりません。


【12】AMOUNTを「2」に変更します。

javascript-232.gif


【13】「明細更新」ボタンをクリックします。

javascript-233.gif


【14】明細が更新され、TOTALが再計算されました。

javascript-234.gif


【15】今更新したレコードをクリックします。

javascript-235.gif

＊更新、削除を行う前は必ず操作の対象となる明細をクリックしなければなりません。


【16】「明細削除」ボタンをクリックします。

javascript-236.gif


【17】明細が削除され、TOTALが再計算されました。

javascript-237.gif


【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)追加の場合は問題ないのですが、更新、削除は明細選択ボックスで選択したレコードが操作対象となります。明細選択ボックスは、伝票を切り替えた時や追加・更新・削除するたびに再作成されるので、更新、削除する前に必ず明細をクリックする必要があります。


]]> Step50・明細 合計金額を表示 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45610109 http://java-script.seesaa.net/article/45597141.html 明細 削除 Fri, 22 Jun 2007 14:27:11 +0900 明細の削除は関数dataDeleteDetails()で行います。データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。削除はSQL文も簡単なのでもうひといきです。【1】以下のように details.js を更新します。他は前回までと同じです。details.jsvar txtAmount;var txtMemo;var selectSlip;var selectGoods;onload = init;onunload = dbClose.. SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。 【3】明細が表示されました。 javascript-192.gif 【4】伝票選択ボックスから伝票番号「23」を選んでください。 javascript-193.gif 【5】更新のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。 javascript-215.gif 【6】DETAILS_CD「63」をクリックします。 javascript-216.gif 【7】このとき明細選択ボックスのvalueは「63」になっています。削除ではこの値を使います。 javascript-217.gif 【8】「明細削除」ボタンをクリックします。 javascript-224.gif 【9】確認メッセージが表示されますので、「OK」をクリックします。 javascript-218.gif javascript-219.gif 【10】削除しましたというメッセージが表示されました。 javascript-220.gif 【11】明細のレコードが1件削除されました。 javascript-221.gif 【12】削除のSQL文が正しく作成されていることを確認してください。 javascript-222.gif 【13】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが削除されていることを確認します。 javascript-223.gif 【解説】 （1）関数dataDeleteDetails()では削除のSQL文を作成し、データを削除しています。 削除の時はDETAILS_CDが重要です。DETAILS_CDは明細選択ボックスの値を使います。値は「selectDetails.value」で取得できます。 ＊必ず選択ボックスで選択してから「明細削除」ボタンをクリックしてください。選択しないで削除しようとするとエラーになります。 【SQL文の組み立て方】 最終的に組み立てたいSQL文です。 delete from T08Details where Details_CD = 63 全体を「"」（ダブルクォーテーション）で囲みます。 "delete from T08Details where Details_CD = 63" 値をコントロールや変数に置き換えます。 "delete from T08Details where Details_CD = Number(selectDetails.value)" コントロールや変数の前後に半角空白を入れ切り離します。 "delete from T08Details where Details_CD = Number(selectDetails.value) " コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。 "delete from T08Details where Details_CD =" Number(selectDetails.value) コントロールや変数と文字列を「+」で結合します。 "delete from T08Details where Details_CD =" + Number(selectDetails.value) 変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。 var mySql = "delete from T08Details where Details_CD =" + Number(selectDetails.value); ]]>
【1】以下のように details.js を更新します。他は前回までと同じです。

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("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;
}


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;
}



【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。

★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。

★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。


【3】明細が表示されました。

javascript-192.gif


【4】伝票選択ボックスから伝票番号「23」を選んでください。

javascript-193.gif


【5】更新のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。

javascript-215.gif


【6】DETAILS_CD「63」をクリックします。

javascript-216.gif


【7】このとき明細選択ボックスのvalueは「63」になっています。削除ではこの値を使います。

javascript-217.gif


【8】「明細削除」ボタンをクリックします。

javascript-224.gif


【9】確認メッセージが表示されますので、「OK」をクリックします。
javascript-218.gif

javascript-219.gif


【10】削除しましたというメッセージが表示されました。

javascript-220.gif


【11】明細のレコードが1件削除されました。

javascript-221.gif


【12】削除のSQL文が正しく作成されていることを確認してください。

javascript-222.gif


【13】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが削除されていることを確認します。

javascript-223.gif


【解説】

（1）関数dataDeleteDetails()では削除のSQL文を作成し、データを削除しています。

削除の時はDETAILS_CDが重要です。DETAILS_CDは明細選択ボックスの値を使います。値は「selectDetails.value」で取得できます。

＊必ず選択ボックスで選択してから「明細削除」ボタンをクリックしてください。選択しないで削除しようとするとエラーになります。


【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
delete from T08Details where Details_CD = 63

全体を「"」（ダブルクォーテーション）で囲みます。
"delete from T08Details where Details_CD = 63"

値をコントロールや変数に置き換えます。
"delete from T08Details where Details_CD = Number(selectDetails.value)"

コントロールや変数の前後に半角空白を入れ切り離します。
"delete from T08Details where Details_CD = Number(selectDetails.value) "

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"delete from T08Details where Details_CD =" Number(selectDetails.value)

コントロールや変数と文字列を「+」で結合します。
"delete from T08Details where Details_CD =" + Number(selectDetails.value)

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "delete from T08Details where Details_CD =" + Number(selectDetails.value);


]]> Step49・明細 削除 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45597141 http://java-script.seesaa.net/article/45591709.html 明細 更新 Fri, 22 Jun 2007 13:35:48 +0900 明細の更新は関数dataUpdateDetails()で行います。入力データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。【1】以下のように details.js を更新します。他は前回までと同じです。details.jsvar txtAmount;var txtMemo;var selectSlip;var selectGoods;onload = init;onunload = dbClose;function init() {&n.. SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。 【3】明細が表示されました。 javascript-192.gif 【4】伝票選択ボックスから伝票番号「23」を選んでください。 javascript-193.gif 【5】追加のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。 javascript-207.gif 【6】DETAILS_CD「63」をクリックすると、上の選択ボックスやテキストボックスにデータが反映されます。 javascript-208.gif 【7】商品選択ボックスで「USBメモリ」を選択、AMOUNT（数量）に「2」、MEMO（メモ）に「テスト2」と入力します。 javascript-209.gif 【8】「明細更新」ボタンをクリックします。 javascript-210.gif 【9】更新しましたというメッセージが表示されました。 javascript-211.gif 【10】明細に更新したレコードが表示されました。DETAILS_CDとSLIP_CDは変わらないことを確認してください。 javascript-212.gif 【11】更新のSQL文が正しく作成されていることを確認してください。 javascript-213.gif 【12】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが更新されていることを確認します。 javascript-214.gif 【解説】 （1）関数dataUpdateDetails()では更新のSQL文を作成し、データを更新しています。 更新の時はDETAILS_CDとSLIP_CDは変わりません。更新はDETAILS_CDがwhereの抽出条件となるので変わるとまずいですし、SLIP_CDが変わると明細が他の伝票に移動してしまいます。 よって更新ではGOODS_CD、AMOUNT、MEMOが対象となります。 【SQL文の組み立て方】 最終的に組み立てたいSQL文です。 update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63 全体を「"」（ダブルクォーテーション）で囲みます。 "update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63" 値をコントロールや変数に置き換えます。 "update T08Details set GOODS_CD = Number(selectGoods.value),AMOUNT = Number(txtAmount.value),MEMO = 'txtMemo.value' where Details_CD = Number(selectDetails.value)" コントロールや変数の前後に半角空白を入れ切り離します。 "update T08Details set GOODS_CD = Number(selectGoods.value) ,AMOUNT = Number(txtAmount.value ) ,MEMO = ' txtMemo.value ' where Details_CD = Number(selectDetails.value )" コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。 "update T08Details set GOODS_CD =" Number(selectGoods.value) ",AMOUNT =" Number(txtAmount.value ) ",MEMO = '" txtMemo.value "' where Details_CD =" Number(selectDetails.value ) コントロールや変数と文字列を「+」で結合します。 "update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value ) 変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。 var mySql = "update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value ); 上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。 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); 変数内では単純に改行できないので、 mySql ="この中では改行できない" mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。 mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。 ]]>
【1】以下のように details.js を更新します。他は前回までと同じです。

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("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;
}


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 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;
}



【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。

★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。

★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。


【3】明細が表示されました。

javascript-192.gif


【4】伝票選択ボックスから伝票番号「23」を選んでください。

javascript-193.gif


【5】追加のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。

javascript-207.gif


【6】DETAILS_CD「63」をクリックすると、上の選択ボックスやテキストボックスにデータが反映されます。

javascript-208.gif


【7】商品選択ボックスで「USBメモリ」を選択、AMOUNT（数量）に「2」、MEMO（メモ）に「テスト2」と入力します。

javascript-209.gif


【8】「明細更新」ボタンをクリックします。

javascript-210.gif


【9】更新しましたというメッセージが表示されました。

javascript-211.gif


【10】明細に更新したレコードが表示されました。DETAILS_CDとSLIP_CDは変わらないことを確認してください。

javascript-212.gif


【11】更新のSQL文が正しく作成されていることを確認してください。

javascript-213.gif


【12】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが更新されていることを確認します。

javascript-214.gif


【解説】

（1）関数dataUpdateDetails()では更新のSQL文を作成し、データを更新しています。

更新の時はDETAILS_CDとSLIP_CDは変わりません。更新はDETAILS_CDがwhereの抽出条件となるので変わるとまずいですし、SLIP_CDが変わると明細が他の伝票に移動してしまいます。

よって更新ではGOODS_CD、AMOUNT、MEMOが対象となります。


【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63

全体を「"」（ダブルクォーテーション）で囲みます。
"update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63"

値をコントロールや変数に置き換えます。
"update T08Details set GOODS_CD = Number(selectGoods.value),AMOUNT = Number(txtAmount.value),MEMO = 'txtMemo.value' where Details_CD = Number(selectDetails.value)"

コントロールや変数の前後に半角空白を入れ切り離します。
"update T08Details set GOODS_CD = Number(selectGoods.value) ,AMOUNT = Number(txtAmount.value ) ,MEMO = ' txtMemo.value ' where Details_CD = Number(selectDetails.value )"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"update T08Details set GOODS_CD =" Number(selectGoods.value) ",AMOUNT =" Number(txtAmount.value ) ",MEMO = '" txtMemo.value "' where Details_CD =" Number(selectDetails.value )

コントロールや変数と文字列を「+」で結合します。
"update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value )

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value );

上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。

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);

変数内では単純に改行できないので、
mySql ="この中では改行できない"

mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。
mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。


]]> Step48・明細 更新 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45591709 http://java-script.seesaa.net/article/45517571.html 明細 追加 Thu, 21 Jun 2007 22:25:22 +0900 今回は明細にデータを追加してみましょう。2つの関数dataInsertDetails()、dataCheckDetails()を組み込むだけでできます。明細は伝票と密接な関係があるので、まず選択ボックスで伝票を選択し、SLIP_CDで伝票に関連付けて明細を追加します。【1】以下のように details.js を更新します。他は前回までと同じです。details.jsvar txtAmount;var txtMemo;var selectSlip;var selectGoods.. SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。 【3】明細が表示されました。 javascript-192.gif 【4】伝票選択ボックスから伝票番号「23」を選んでください。 javascript-193.gif 【5】すでに2件の明細があることを確認してください。 javascript-194.gif 【6】「明細新規」をクリックします。 javascript-195.gif 【7】商品選択ボックスにフォーカスが移りました。 javascript-196.gif 【8】「デジタルカメラ」を選択してください。 javascript-197.gif 【9】AMOUNT（数量）に「1」を入力します。 javascript-198.gif 【10】MEMO（メモ）に「テスト」と入力します。 javascript-199.gif 【11】「明細追加」ボタンをクリックします。 javascript-200.gif 【12】追加されましたというメッセージが表示されました。 javascript-201.gif 【13】明細に追加したレコードが表示されました。 javascript-202.gif DETAILS_CDはオートナンバーなので自動で入力されます。SLIP_CDは伝票選択ボックスの値です。GOODS_NAME（商品名）、PRICE（単価）はテーブルT06Goodsを参照しています。 ということでユーザーが画面から入力する必要があるのは、GOODS_CD、AMOUNT、MEMOです。 【14】追加のSQL文が正しく作成されていることを確認してください。 javascript-203.gif 【15】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが追加されていることを確認します。 javascript-204.gif 【解説】 （1）テーブルT08Detailsをデザインビューで見ると、DETAILS_CDのデータ型が「オートナンバー」になっています。オートナンバーはデータが追加される時、自動で連番が入力されるので、insertでDETAILS_CDを指定する必要はありません。 javascript-206.gif ＊実はテーブルT07SlipのSLIP_CDもオートナンバーに設定していますが、伝票番号はユーザーが任意の番号でも入力できるようにしていました。 （2）テーブルT08Detailsをデータシートビューで見ると、追加の時入力が必要なのは、 SLIP_CD、GOODS_CD、AMOUNT、MEMOの4つです。 javascript-205.gif この中で重要なのはSLIP_CDです。明細は必ずある伝票に関連付けられて追加されますから、明細が表示されるときには伝票選択ボックスにSLIP_CDが入っていますのでその値を使います。ユーザーが入力する必要はありません。 またテーブルT08DetailsにはGOODS_CDさえ保存していたら、テーブルT06Goodsを参照してGOODS_NAME（商品名）、PRICE（単価）がわかります。 （3）関数dataInsertDetails()では追加のSQL文を作成し、データ追加しています。 今回、DETAILS_CDは入力しないので、このような時はテーブル名の後ろに追加するフィールド名をすべて書く必要があります。 insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) SLIP_CDは伝票選択ボックスから値を取得します。 selectSlip.value （4）関数dataCheckDetails()では入力データをチェックしています。 本来明細ではMEMOは未入力でもよいのですが、すべてのフィールドを入力するようにしておいたほうが初心者のうちはSQL文やデータを表示するときのプログラムが簡単になります。 もし未入力を許可する場合は「null」という特別な値に対する処理が必要になります。 insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, null) 【SQL文の組み立て方】 最終的に組み立てたいSQL文です。 insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト') 全体を「"」（ダブルクォーテーション）で囲みます。 "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')" 値をコントロールや変数に置き換えます。 "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(selectSlip.value,selectGoods.value,txtAmount.value, 'txtMemo.value')" コントロールや変数の前後に半角空白を入れ切り離します。 "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values( selectSlip.value , selectGoods.value , txtAmount.value , ' txtMemo.value ')" コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。 "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" selectSlip.value "," selectGoods.value "," txtAmount.value ", '" txtMemo.value "')" コントロールや変数と文字列を「+」で結合します。 "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')" 変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。 var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')"; 上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。 mySql = mySql + "values("; mySql = mySql + Number(selectSlip.value) + ","; mySql = mySql + Number(selectGoods.value) + ","; mySql = mySql + Number(txtAmount.value) + ", '"; mySql = mySql + txtMemo.value + "'"; mySql = mySql +")"; 変数内では単純に改行できないので、 mySql ="この中では改行できない" mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。 mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。 ]]>
明細は伝票と密接な関係があるので、まず選択ボックスで伝票を選択し、SLIP_CDで伝票に関連付けて明細を追加します。

【1】以下のように details.js を更新します。他は前回までと同じです。

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("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;
}


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 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;
}



【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。

★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。

★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。


【3】明細が表示されました。

javascript-192.gif


【4】伝票選択ボックスから伝票番号「23」を選んでください。

javascript-193.gif


【5】すでに2件の明細があることを確認してください。

javascript-194.gif


【6】「明細新規」をクリックします。

javascript-195.gif


【7】商品選択ボックスにフォーカスが移りました。

javascript-196.gif


【8】「デジタルカメラ」を選択してください。

javascript-197.gif


【9】AMOUNT（数量）に「1」を入力します。

javascript-198.gif


【10】MEMO（メモ）に「テスト」と入力します。

javascript-199.gif


【11】「明細追加」ボタンをクリックします。

javascript-200.gif


【12】追加されましたというメッセージが表示されました。

javascript-201.gif


【13】明細に追加したレコードが表示されました。

javascript-202.gif

DETAILS_CDはオートナンバーなので自動で入力されます。SLIP_CDは伝票選択ボックスの値です。GOODS_NAME（商品名）、PRICE（単価）はテーブルT06Goodsを参照しています。

ということでユーザーが画面から入力する必要があるのは、GOODS_CD、AMOUNT、MEMOです。


【14】追加のSQL文が正しく作成されていることを確認してください。

javascript-203.gif


【15】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが追加されていることを確認します。

javascript-204.gif


【解説】

（1）テーブルT08Detailsをデザインビューで見ると、DETAILS_CDのデータ型が「オートナンバー」になっています。オートナンバーはデータが追加される時、自動で連番が入力されるので、insertでDETAILS_CDを指定する必要はありません。

javascript-206.gif

＊実はテーブルT07SlipのSLIP_CDもオートナンバーに設定していますが、伝票番号はユーザーが任意の番号でも入力できるようにしていました。


（2）テーブルT08Detailsをデータシートビューで見ると、追加の時入力が必要なのは、
SLIP_CD、GOODS_CD、AMOUNT、MEMOの4つです。

javascript-205.gif

この中で重要なのはSLIP_CDです。明細は必ずある伝票に関連付けられて追加されますから、明細が表示されるときには伝票選択ボックスにSLIP_CDが入っていますのでその値を使います。ユーザーが入力する必要はありません。

またテーブルT08DetailsにはGOODS_CDさえ保存していたら、テーブルT06Goodsを参照してGOODS_NAME（商品名）、PRICE（単価）がわかります。


（3）関数dataInsertDetails()では追加のSQL文を作成し、データ追加しています。

今回、DETAILS_CDは入力しないので、このような時はテーブル名の後ろに追加するフィールド名をすべて書く必要があります。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO)

SLIP_CDは伝票選択ボックスから値を取得します。
selectSlip.value


（4）関数dataCheckDetails()では入力データをチェックしています。

本来明細ではMEMOは未入力でもよいのですが、すべてのフィールドを入力するようにしておいたほうが初心者のうちはSQL文やデータを表示するときのプログラムが簡単になります。

もし未入力を許可する場合は「null」という特別な値に対する処理が必要になります。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, null)


【SQL文の組み立て方】

最終的に組み立てたいSQL文です。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')

全体を「"」（ダブルクォーテーション）で囲みます。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')"

値をコントロールや変数に置き換えます。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(selectSlip.value,selectGoods.value,txtAmount.value, 'txtMemo.value')"

コントロールや変数の前後に半角空白を入れ切り離します。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values( selectSlip.value , selectGoods.value , txtAmount.value , ' txtMemo.value ')"

コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" selectSlip.value "," selectGoods.value "," txtAmount.value ", '" txtMemo.value "')"

コントロールや変数と文字列を「+」で結合します。
"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')"

変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')";


上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。

mySql = mySql + "values(";
mySql = mySql + Number(selectSlip.value) + ",";
mySql = mySql + Number(selectGoods.value) + ",";
mySql = mySql + Number(txtAmount.value) + ", '";
mySql = mySql + txtMemo.value + "'";
mySql = mySql +")";

変数内では単純に改行できないので、
mySql ="この中では改行できない"

mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。
mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。


]]> Step47・明細 追加 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45517571 http://java-script.seesaa.net/article/45390104.html 明細 表示 Wed, 20 Jun 2007 17:44:57 +0900 明細（details）は伝票（slip）のプログラムとほとんど同じ要領で作れます。この2つは見かけは違いますが、よく見るとプログラムの流れは同じです。今回は伝票選択ボックスを選択すると、明細一覧が表示されるようになっています。テーブルT08Detailsのデータを一覧で表示していますが仕組みは伝票と同じです。商品選択ボックスも顧客選択ボックスの流用です。伝票のプログラムが読めれば明細のプログラムはほとんど解説なしに読めるようになっていると思います。まずは明細を表示するところま.. javascript-183.gif 【4】伝票選択ボックスと商品選択ボックスはプログラムで表示しています。 javascript-185.gif 【5】伝票選択ボックスから伝票番号「10」を選択します。 javascript-184.gif 【6】明細が表示されました。 javascript-186.gif ＊ゴチャゴチャして見難いかもしれませんが、DETAILS_CDとSLIP_CDの変化をつかんでほしいためです。これらは最終的に表示しないようにします。 【7】伝票番号「10」の明細だけが表示されているところが重要です。伝票選択ボックスで選択した伝票番号と同じだということを確認してください。 javascript-191.gif 【8】明細のレコードを選択すると、そのデータが上の選択ボックスやテキストボックスに反映されます。 javascript-187.gif 【9】「明細新規」をクリックします。 javascript-188.gif 【10】テキストボックスはクリアされ、商品選択ボックスにフォーカスが移りました。 javascript-189.gif 【11】商品選択ボックスで商品を選べます。 javascript-190.gif 【12】伝票選択ボックスや明細をいろいろ切り替えて動作を確認してください。 【解説】 (1)関数slipDisplay()は伝票の時とまったく同じです。 (2)関数slipChange()は伝票選択ボックスをチェンジした時に、関数detailsDisplay()を呼び出しています。 (3)関数detailsDisplay()は明細を表示しています。テーブルT08DetailsにはGOODS_CDしかなく、商品に関する情報GOODS_NAME、PRICE、MEMOがわからないので、テーブルT06Goodsも一緒に使います。 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"; ＊SLIP_CDの抽出条件にselectSlip.valueを使うことで、目的の伝票の明細だけが取り出せる仕組みです。 またこの関数ではイベントハンドラの設定も行っています。 document.getElementById("selectDetails").onchange = function (){detailsChange(this);} (4)関数detailsChange()は明細をクリックした時に、商品選択ボックスやテキストボックスに1レコード分のデータを表示しています。 var mySql = "select GOODS_CD,AMOUNT,MEMO "; mySql = mySql +"from T08Details "; mySql = mySql +"where Details_CD = " + obj.value ; 関数goodsIndexSearch()で商品選択ボックスを切り替えています。 selectGoods.selectedIndex = goodsIndexSearch(recordSet(0)); (5)関数goodsDisplay()は商品選択ボックスの表示と、イベントハンドラの設定を行っています。 (6)関数goodsChange()は商品選択ボックスがチェンジしたときに呼び出されます。 (7)関数newDetails()は「明細新規」をクリックした時に呼び出されます。 (8)関数textClearDetails()は明細のテキストボックスをクリアします。 (9)関数goodsIndexSearch()はGOODS_CDから何番目の商品を選択状態にするかIndexを返します。伝票の顧客の時と同じ仕組みです。 ]]>
今回は伝票選択ボックスを選択すると、明細一覧が表示されるようになっています。テーブルT08Detailsのデータを一覧で表示していますが仕組みは伝票と同じです。商品選択ボックスも顧客選択ボックスの流用です。

伝票のプログラムが読めれば明細のプログラムはほとんど解説なしに読めるようになっていると思います。

まずは明細を表示するところまで作ってみましょう。

【1】以下のように details.html、details.css、details.js を作成します。base.css、database.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.css

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



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("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;
}


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 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;
}



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


【3】明細が表示されました。
javascript-183.gif


【4】伝票選択ボックスと商品選択ボックスはプログラムで表示しています。

javascript-185.gif


【5】伝票選択ボックスから伝票番号「10」を選択します。

javascript-184.gif


【6】明細が表示されました。

javascript-186.gif

＊ゴチャゴチャして見難いかもしれませんが、DETAILS_CDとSLIP_CDの変化をつかんでほしいためです。これらは最終的に表示しないようにします。


【7】伝票番号「10」の明細だけが表示されているところが重要です。伝票選択ボックスで選択した伝票番号と同じだということを確認してください。

javascript-191.gif


【8】明細のレコードを選択すると、そのデータが上の選択ボックスやテキストボックスに反映されます。

javascript-187.gif


【9】「明細新規」をクリックします。

javascript-188.gif


【10】テキストボックスはクリアされ、商品選択ボックスにフォーカスが移りました。

javascript-189.gif


【11】商品選択ボックスで商品を選べます。

javascript-190.gif


【12】伝票選択ボックスや明細をいろいろ切り替えて動作を確認してください。


【解説】

(1)関数slipDisplay()は伝票の時とまったく同じです。


(2)関数slipChange()は伝票選択ボックスをチェンジした時に、関数detailsDisplay()を呼び出しています。


(3)関数detailsDisplay()は明細を表示しています。テーブルT08DetailsにはGOODS_CDしかなく、商品に関する情報GOODS_NAME、PRICE、MEMOがわからないので、テーブルT06Goodsも一緒に使います。

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";

＊SLIP_CDの抽出条件にselectSlip.valueを使うことで、目的の伝票の明細だけが取り出せる仕組みです。

またこの関数ではイベントハンドラの設定も行っています。
document.getElementById("selectDetails").onchange = function (){detailsChange(this);}


(4)関数detailsChange()は明細をクリックした時に、商品選択ボックスやテキストボックスに1レコード分のデータを表示しています。

var mySql = "select GOODS_CD,AMOUNT,MEMO ";
mySql = mySql +"from T08Details ";
mySql = mySql +"where Details_CD = " + obj.value ;

関数goodsIndexSearch()で商品選択ボックスを切り替えています。
selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));


(5)関数goodsDisplay()は商品選択ボックスの表示と、イベントハンドラの設定を行っています。


(6)関数goodsChange()は商品選択ボックスがチェンジしたときに呼び出されます。


(7)関数newDetails()は「明細新規」をクリックした時に呼び出されます。


(8)関数textClearDetails()は明細のテキストボックスをクリアします。


(9)関数goodsIndexSearch()はGOODS_CDから何番目の商品を選択状態にするかIndexを返します。伝票の顧客の時と同じ仕組みです。


]]> Step46・明細 表示 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45390104 http://java-script.seesaa.net/article/45380346.html データベースの修正 Wed, 20 Jun 2007 15:47:00 +0900 テーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、「MEMO」に修正が必要です。またフィールド名を変更したことで、Accessのフォームも修正しましたので、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。【解説】Accessでフィールド名に「NOTE」を使う場合は、SQL文の中で[]カッコで囲まないとエラーになります。insert into.. またフィールド名を変更したことで、Accessのフォームも修正しましたので、SampleDB010.zipをダウンロードし直してください。 すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。 【解説】 Accessでフィールド名に「NOTE」を使う場合は、SQL文の中で[]カッコで囲まないとエラーになります。 insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,[NOTE]) values(23,10,1, 'テスト') 「MEMO」だとそのまま使えます。 insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト') ]]>
javascript-182.gif

またフィールド名を変更したことで、Accessのフォームも修正しましたので、SampleDB010.zipをダウンロードし直してください。

すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。

【解説】
Accessでフィールド名に「NOTE」を使う場合は、SQL文の中で[]カッコで囲まないとエラーになります。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,[NOTE]) values(23,10,1, 'テスト')

「MEMO」だとそのまま使えます。
insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')


]]> Step45・データベースの修正 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45380346 http://java-script.seesaa.net/article/45293048.html 販売伝票 改良 Tue, 19 Jun 2007 15:47:07 +0900 販売伝票は「伝票」と「明細」で構成されます。前回までに作ったのは伝票にあたる部分です。（販売伝票の上部）次回から明細を作成しますが、その前に伝票に明細を組み込みやすくするため、画面とプログラムを改良します。伝票と明細は似たようなプログラムで動くので、フォーム上の部品や関数名に、伝票には「Slip」、明細には「Details」と付けることで区別します。【1】以下のように slip.htmlとslip.js を更新します。slip.css、base.css、database.js.. javascript-181.gif ＊「最大値」が「伝票新規」に変わりましたが働きは同じです。 【解説】 (1)大きな変更点はフォーム上の部品や関数名に「Slip」を付けたことです。 ・html側 btnInsert　→　btnInsertSlip btnUpdate　→　btnUpdateSlip btnDelete　→　btnDeleteSlip linkMaxCd　→　linkNewSlip ・JavaScript側 maxCd()　→　newSlip()とmaxCdSlip()に分離 textClear()　→　textClearSlip() dataInsert()　→　textClearSlip() dataUpdate()　→　dataUpdateSlip() dataDelete()　→　dataDeleteSlip() dataCheck()　→　dataCheckSlip() (2)「最大値」を「伝票新規」に変えたことで関数も2つに分離しました。前回までの関数maxCd()はnewSlip()にあたり、この関数からmaxCdSlip()を呼び出して最大値を取得しています。分離したことでそれぞれの関数がシンプルになり、maxCdSlip()は他の用途にも使いやすくなりました。 function newSlip(){ 省略   txtSlipCd.value = maxCdSlip() + 1; 省略 } function maxCdSlip(){ 省略   return maxCd; } (3)「div」を「span」に変更しました。<span> や <div> は特に意味を持たないタグです。タグで囲んだ部分にスタイルシートを適用したりするのに使われます。<span> はインライン要素で前後に改行は入りません。<div> はブロック要素で前後に改行が入ります。今回は配置するときに改行が邪魔だったので、<span> を使いました。 <div id="slipDisplay"></div> ↓ <span id="slipDisplay"></span> <div id="customerDisplay"></div> ↓ <span id="customerDisplay"></span> (4)sqlDisplayを下に配置しました。sqlDisplayはSQL文や選択ボックスの情報を表示するときに使っていますが、システムが完成して不要になったら、関数sqlDisplay()を呼び出している部分をコメントにすると表示されなくなります。 例 //sqlDisplay(mySql); //sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value); 【伝票のダウンロード】 今回までの改良を含むSlipです。 database.jsとbase.cssは他のマスターと共通です。 slip1.zip データベースをまだ入手していない方は一緒にダウンロードしてください。 SampleDB010.zip データベース「SampleDB010.mdb」はCドライブの直下に保存します。 ]]>
次回から明細を作成しますが、その前に伝票に明細を組み込みやすくするため、画面とプログラムを改良します。

伝票と明細は似たようなプログラムで動くので、フォーム上の部品や関数名に、伝票には「Slip」、明細には「Details」と付けることで区別します。

【1】以下のように slip.htmlとslip.js を更新します。slip.css、base.css、database.js は前回までと同じです。

slip.html

<html>
  <head>
    <script type="text/javascript" src="database.js"></script>
    <script type="text/javascript" src="slip.js"></script>
    <link href="base.css" rel="stylesheet" type="text/css">
    <link href="slip.css" rel="stylesheet" type="text/css">
    <title>slip</title>
  </head>
  <body>
    販売伝票
    <span id="slipDisplay"></span><a href="" name="linkNewSlip" id="linkNewSlip">伝票新規</a>
    <form name="form1">
      <p>
        <input type="button" name="btnInsertSlip" id="btnInsertSlip" value="伝票追加">
        <input type="button" name="btnUpdateSlip" id="btnUpdateSlip" value="伝票更新">
        <input type="button" name="btnDeleteSlip" id="btnDeleteSlip" value="伝票削除">
      </p>
      SLIP_CD:<input type="text" name="txtSlipCd" id="txtSlipCd">
      SLIP_DATE:<input type="text" name="txtSlipDate" id="txtSlipDate">
      CST_CD:<span id="customerDisplay"></span>
    </form>
    <span id="addressDisplay"></span>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="sqlDisplay"></div>
  </body>
</html>



slip.js

var txtSlipCd;
var txtSlipDate;
var selectCst;

onload = init;
onunload = dbClose;

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

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

  document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}
  document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}
  document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}
  document.getElementById("linkNewSlip").onclick = function (){return newSlip();}

  dbConnect();
  slipDisplay();
  cstDisplay();
}


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){
    textClearSlip();
    cstDisplay();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    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));
    selectCst.selectedIndex = cstIndexSearch(recordSet(2));
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);
  
    recordSet.Close();
    recordSet = null;
  
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}


function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("customerDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\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("customerDisplay").innerHTML = tempHtml;
  selectCst = document.getElementById("selectCst");
  selectCst.onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}


function cstChange(obj) {
  //顧客を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }else{
    var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);
  
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);
  
    recordSet.Close();
    recordSet = null;
  
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}


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


function newSlip(){
  //伝票を新規作成する関数
  textClearSlip();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = maxCdSlip() + 1;
  txtSlipDate.focus();
  return false;
}


function maxCdSlip(){
  //SLIP_CDの最大値を取得する関数
  var mySql = "select max(SLIP_CD) from T07Slip";
  var recordSet = database.Execute(mySql);
  var maxCd = recordSet(0);
  return maxCd;
}


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


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

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

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


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


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

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


function dataCheckSlip(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 && selectCst.value == 0) {
    alert("CST_CD" + "は必ず選択してください。");
    return false;
  }

  return true;
}


function cstIndexSearch(cstCd){
  //顧客選択ボックスのIndexを検索する関数
  var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";
  var recordSet = database.Execute(mySql);
  var cstIndex = recordSet(0);
  return cstIndex;
}



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


【3】前回までと動きは変わらないことを確認してください。

javascript-181.gif

＊「最大値」が「伝票新規」に変わりましたが働きは同じです。


【解説】

(1)大きな変更点はフォーム上の部品や関数名に「Slip」を付けたことです。
・html側
btnInsert　→　btnInsertSlip
btnUpdate　→　btnUpdateSlip
btnDelete　→　btnDeleteSlip
linkMaxCd　→　linkNewSlip

・JavaScript側
maxCd()　→　newSlip()とmaxCdSlip()に分離
textClear()　→　textClearSlip()
dataInsert()　→　textClearSlip()
dataUpdate()　→　dataUpdateSlip()
dataDelete()　→　dataDeleteSlip()
dataCheck()　→　dataCheckSlip()


(2)「最大値」を「伝票新規」に変えたことで関数も2つに分離しました。前回までの関数maxCd()はnewSlip()にあたり、この関数からmaxCdSlip()を呼び出して最大値を取得しています。分離したことでそれぞれの関数がシンプルになり、maxCdSlip()は他の用途にも使いやすくなりました。

function newSlip(){
省略
  txtSlipCd.value = maxCdSlip() + 1;
省略
}

function maxCdSlip(){
省略
  return maxCd;
}


(3)「div」を「span」に変更しました。<span> や <div> は特に意味を持たないタグです。タグで囲んだ部分にスタイルシートを適用したりするのに使われます。<span> はインライン要素で前後に改行は入りません。<div> はブロック要素で前後に改行が入ります。今回は配置するときに改行が邪魔だったので、<span> を使いました。

<div id="slipDisplay"></div>
↓
<span id="slipDisplay"></span>

<div id="customerDisplay"></div>
↓
<span id="customerDisplay"></span>


(4)sqlDisplayを下に配置しました。sqlDisplayはSQL文や選択ボックスの情報を表示するときに使っていますが、システムが完成して不要になったら、関数sqlDisplay()を呼び出している部分をコメントにすると表示されなくなります。

例
//sqlDisplay(mySql);
//sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);


【伝票のダウンロード】
今回までの改良を含むSlipです。
database.jsとbase.cssは他のマスターと共通です。
slip1.zip

データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。


]]> Step44・販売伝票 改良 JavaScript入門 blog:http://blog.seesaa.jp,java-script/45293048