【1】slip.html をダブルクリックしてWebブラウザで開きます。
★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。
【2】販売伝票が表示されました。伝票と明細が1つの画面に表示されています。水平線の上が伝票で下が明細です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これから伝票を削除すると対応する明細も全て削除されることを確認します。
【36】「伝票削除」ボタンをクリックします。

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

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

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

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

【ポイント】
(1)伝票にあるSLIP_CDは「伝票新規の時にだけ変更」できます。いったん伝票を作成したらそれ以降は表示されている値を変更しないでください。伝票の更新・削除や明細の追加はこの伝票番号を使っているので、変更すると不具合が出ます。
(2)明細の更新、削除は明細を選択してからでないと行えません。
(3)伝票を削除すると、対応している明細も削除するようにプログラムしています。
【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip
データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。