<?xml version="1.0" encoding="UTF-8"?>

<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns="http://purl.org/rss/1.0/"
>

<channel rdf:about="https://java-script.seesaa.net/">
<title>JavaScript初心者入門講座</title>
<link>https://java-script.seesaa.net/</link>
<description>JavaScriptのサンプルを使って簡単な基礎から、データベースの操作まで学べる初心者向けの入門講座です。関数の作り方やJavaScriptを外部ファイルとして読み込む方法、フォームのデータを正規表現でチェックする方法、イベントの設定方法、配列の使い方などが学べます。</description>
<dc:language>ja</dc:language>
<admin:generatorAgent rdf:resource="https://blog.seesaa.jp/" />
<items>
<rdf:Seq>
<rdf:li rdf:resource="https://java-script.seesaa.net/article/445659864.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/432228715.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/410598641.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45707408.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45700813.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45634352.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45626430.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45618534.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45610109.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45597141.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45591709.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45517571.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45390104.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45380346.html" />
<rdf:li rdf:resource="https://java-script.seesaa.net/article/45293048.html" />
</rdf:Seq>
</items>
</channel>

<item rdf:about="https://java-script.seesaa.net/article/445659864.html">
<link>https://java-script.seesaa.net/article/445659864.html</link>
<title>JavaScriptとUnityでゲームが作れる。</title>
<description>JavaScriptで本格的なゲームを作ることができます。しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応したゲームが作れます。例えば、・AndroidやiPhoneなどのスマートフォン用・WindowsやmacOS、Linuxなどのパソコン用・ウェブブラウザ用・PlayStationやXbox、Wiiなどのゲーム機用他にも多種多様です。また最近注目されているVR(バーチャルリアリティー)やAR(拡張現実)に対応したアプリも開発できま..</description>
<dc:subject>JavaScriptでゲームが作れる</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2017-01-07T13:21:19+09:00</dc:date>
<content:encoded><![CDATA[
<strong>JavaScript</strong>で本格的な<strong>ゲーム</strong>を作ることができます。<br /><br />しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応したゲームが作れます。<br /><br />例えば、<br />・AndroidやiPhoneなどのスマートフォン用<br />・WindowsやmacOS、Linuxなどのパソコン用<br />・ウェブブラウザ用<br />・PlayStationやXbox、Wiiなどのゲーム機用<br />他にも多種多様です。<br /><br />また最近注目されているVR(バーチャルリアリティー)やAR(拡張現実)に対応したアプリも開発できます。<br /><br />何故JavaScriptで作れるのか？<br />その仕組みを説明しましょうｗ<br /><br />なぜならゲームエンジンで有名なUnityでは、<br />プログラミング言語として、JavaScriptが使えるからです。<br /><br />開発するプログラミング言語を選び、<br /><a href="http://java-script.up.seesaa.net/image/javascript-unity-01.jpg" target="_blank"><img border="0" alt="javaScriptとUnity" src="http://java-script.up.seesaa.net/image/javascript-unity-01-thumbnail2.jpg" width="150" height="84"></a><br /><br />実際にはVisual Studioでプログラムを書きます。<br /><a href="http://java-script.up.seesaa.net/image/javascript-unity-02.jpg" target="_blank"><img border="0" alt="javaScriptとUnity" src="http://java-script.up.seesaa.net/image/javascript-unity-02-thumbnail2.jpg" width="150" height="142"></a><br /><br />ゲームエンジンとは、ゲーム開発でよく使われる機能(物理計算、照明、影、メニュー遷移など)を、誰でも簡単に使えるようにした開発環境です。<br /><br />Unityはゲーム作りの統合開発環境とも言えます。<br /><br />普通、JavaScriptのイメージというと、<br />Webブラウザ上で動作するプログラミング言語として使われていることですよね。<br /><br />JavaScriptはAjaxの中核技術でもあり、<br />HTML5と組み合わせると、Webブラウザ上で動作するアプリケーションソフト、またはゲームが作れます。<br /><br />しかしUnityを使うことで、JavaScriptの可能性と言うか、展開が一気に広がるわけです。<br /><br />一度作ってしまえば、Unityが各プラットフォームに対応したファイルを自動的に書き出してくれるからです。<br /><br />こんな感じで、選択するだけでビルドできてしまいます。<br /><a href="http://java-script.up.seesaa.net/image/javascript-unity-03.jpg" target="_blank"><img border="0" alt="javaScriptとUnity" src="http://java-script.up.seesaa.net/image/javascript-unity-03-thumbnail2.jpg" width="142" height="150"></a><br /><br />だから開発者であるプログラマーは、ゲームを動作させるプラットフォームのことを考える必要はありません。<br /><br />アイデアやプログラミングに集中することができます。<br /><br />最近はAndroidやiPhoneなどのスマートフォン向けのアプリ、ゲームの開発が流行っていますよね。<br /><br />それが同じプログラムで、しかも使い慣れたJavaScriptでもプログラミングできるのですから嬉しいのです。<br /><br />これまでに学んだJavaScriptの知識を活用できる範囲が、とても広がったわけですね。<br /><br />創作意欲が湧いてきます。<br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/432228715.html">
<link>https://java-script.seesaa.net/article/432228715.html</link>
<title>JavaScriptで出来ることとは？まとめました。</title>
<description>JavaScriptで何ができるのか？まとめてみました。プログラミング言語のJavaScriptは、意外といろんな事ができるんです。・Webブラウザ上で動作するJavaScriptは、Webブラウザ上で実行できるプログラミング言語です。ほとんどのWebブラウザが対応しています。JavaScriptを使うことで、HTMLだけで作るより、とても便利な画面になります。プログラミング言語ですから、計算などの処理をして表示することはもちろん、デザインを操作したり、動きを加えたり、様々な..</description>
<dc:subject>JavaScriptで出来ること</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2016-01-07T11:46:17+09:00</dc:date>
<content:encoded><![CDATA[
<strong>JavaScript</strong>で何ができるのか？まとめてみました。<br /><br />プログラミング言語のJavaScriptは、意外といろんな事ができるんです。<br /><br />・Webブラウザ上で動作する<br />JavaScriptは、Webブラウザ上で実行できるプログラミング言語です。<br /><br />ほとんどのWebブラウザが対応しています。<br /><br />JavaScriptを使うことで、HTMLだけで作るより、とても便利な画面になります。<br /><br />プログラミング言語ですから、計算などの処理をして表示することはもちろん、<br /><br />デザインを操作したり、動きを加えたり、様々なことが可能になります。<br /><br />上記が最も一般的な使われ方でしょう。<br /><br />・Ajaxの中核技術<br />今ではほとんどのWebアプリケーション画面でAjaxが活用されています。<br /><br />JavaScriptは、まさにAjaxの中核技術です。<br /><br />HTML、CSSとともに欠かせない技術となっています。<br /><br />プログラミング言語のJavaScriptだけでも様々な処理が可能ですが、<br /><br />さらにjQueryなどのフレームワークを利用することで、<br />Webブラウザごとの差異を吸収したり、プログラムを簡単に書くことができます。<br /><br />複雑な処理でも、簡潔にプログラミングできるのが最大のメリットです。<br /><br />と、ここまでは一般的によく知られている使われ方です。<br /><br />ここからが本番ｗ<br /><br />・データベースに接続できる<br />実はJavaScriptは、データベースに接続できるんです。<br /><br />この入門講座でも、その使い方をメインで取り上げています。<br /><br />IE(インターネットエクスプローラー)のActiveXObjectとWindowsのODBCデータソースを使うことで、<br /><br />Microsoft社のAccess(アクセス)やOracle(オラクル)などのリレーショナルデータベースにも接続することが出来ます。<br /><br />もちろん、データベースに対して、追加、修正、削除などの処理が実行可能です。<br /><br />Webブラウザからデータベースを操作できると、<br /><br />活用範囲がグッと広がるのでとても便利です。<br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/410598641.html">
<link>https://java-script.seesaa.net/article/410598641.html</link>
<title>JavaScriptは、いろんな可能性を秘めているプログラミング言語です。</title>
<description>JavaScript言語には、まだまだ凄い可能性があります。JavaScriptと言えば、Webアプリケーションの画面で、操作が便利になるように、補助的な機能を加えることに使われるイメージがあります。またはAjaxの中核技術というイメージでしょうか。どちらかと言うと、脇役のプログラミング言語という感じでした。本当はすごいんですけどねｗこのJavaScript入門講座では、テーマとして、あえて伝票管理という業務システムを取り上げています。それは何故か？普通にJavaScript..</description>
<dc:subject>JavaScriptの可能性は凄い</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2014-12-13T23:29:14+09:00</dc:date>
<content:encoded><![CDATA[
<strong>JavaScript</strong>言語には、まだまだ凄い可能性があります。<br /><br />JavaScriptと言えば、Webアプリケーションの画面で、<br /><br />操作が便利になるように、補助的な機能を加えることに使われるイメージがあります。<br /><br />またはAjaxの中核技術というイメージでしょうか。<br /><br />どちらかと言うと、脇役のプログラミング言語という感じでした。<br /><br />本当はすごいんですけどねｗ<br /><br />このJavaScript入門講座では、テーマとして、<br /><br />あえて伝票管理という業務システムを取り上げています。<br /><br />それは何故か？<br /><br />普通にJavaScriptの入門講座を作ったのでは、<br /><br />ありきたりな使われ方しか学べないからです。<br /><br />それはJavaScriptの一面、可能性の一部でしかありません。<br /><br />私は、「もっとJavaScriptは凄いんだ！」という可能性を知って欲しいのです。<br /><br />JavaScriptは、この講座で紹介しているような主役的な使い方もできます。<br /><br />また、意外と簡単にデータベースに接続することもできるので、<br /><br />アイデア次第で、可能性は無限に広がります。<br /><br />JavaScriptは、Webブラウザ上で動作するプログラミング言語なので、<br /><br />使う時はインターネットがつながっているはずです。<br /><br />ということは、ネット上の情報に簡単にアクセスできます。<br /><br />その情報をデータベースに蓄積したり、加工できれば・・・<br /><br />どうですか？<br /><br />いろんな使い方ができそうですよね。<br /><br />とはいっても初心者向けの入門講座ですから、<br /><br />JavaScriptの基本からしっかり教えています。<br /><br />業務システムをWebブラウザで作ることで、<br /><br />JavaScriptの基本から応用まで、広く学べるように工夫しています。<br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45707408.html">
<link>https://java-script.seesaa.net/article/45707408.html</link>
<title>販売伝票 プログラムの解説</title>
<description>伝票と明細は別々に作ってきたので、それぞれのプログラムは独立しています。そこでプログラムを別々に読み込み、全体として上手く動くように調整することで、最小限の変更で済むようにしました。【slip.html】(1)slip.htmlとdetails.htmlを1つにまとめ、「slip.html」にしました。重複する部分は1つにしてあります。(2)伝票と明細は水平線で区切りました。(3)伝票の部品は「form1」の上、明細の部品は「form2」の上に配置しました。(4)head部分..</description>
<dc:subject>Step55・販売伝票 プログラムの解説</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-23T18:23:44+09:00</dc:date>
<content:encoded><![CDATA[
伝票と明細は別々に作ってきたので、それぞれのプログラムは独立しています。そこでプログラムを別々に読み込み、全体として上手く動くように調整することで、最小限の変更で済むようにしました。<br /><br />【slip.html】<br /><br />(1)slip.htmlとdetails.htmlを1つにまとめ、「slip.html」にしました。重複する部分は1つにしてあります。<br /><br />(2)伝票と明細は水平線で区切りました。<br /><br />(3)伝票の部品は「form1」の上、明細の部品は「form2」の上に配置しました。<br /><br />(4)head部分でdatabase.js、slip.js、details.js、base.css、slip.cssを指定しています。<br />&lt;script type="text/javascript" src="database.js"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="slip.js"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="details.js"&gt;&lt;/script&gt;<br />&lt;link href="base.css" rel="stylesheet" type="text/css"&gt;<br />&lt;link href="slip.css" rel="stylesheet" type="text/css<br /><br /><br />【slip.css】<br /><br />(1)slip.cssとdetails.cssを1つにまとめ、「slip.css」にしました。<br /><br />(2)明細の選択ボックスの幅をCSSで指定しています。<br />#selectDetails {<br />&nbsp;&nbsp;width: 600px;<br />}<br /><br /><br />【slip.js】<br /><br />(1)変数selectSlipをdetails.jsから移動しました。<br /><br />(2)関数init()をinitSlip()に名前を変更しました。<br /><br />(3)onload時に呼び出す関数は無名関数を使い、中で2つ呼び出しています。<br />onload = function (){initSlip();initDetails();}<br /><br />(4)更新時にも確認メッセージを表示するようにしました。<br />if(!confirm("本当に更新しますか？")){<br />&nbsp;&nbsp;return ;<br />}<br /><br />(5)関数slipChange()を統合しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。<br /><div class="pg"><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"from T07Slip,T04Customer ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"and SLIP_CD = " + obj.value ;<br />&nbsp;&nbsp;&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipCd.value = recordSet(0);<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipDate.value = dateFormat(recordSet(1));<br />&nbsp;&nbsp;&nbsp;&nbsp;selectCst.selectedIndex = cstIndexSearch(recordSet(2));<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /></div><br /><br />(6)関数newSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。<br /><div class="pg"><br />function newSlip(){<br />&nbsp;&nbsp;//伝票を新規作成する関数<br /><br />&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;txtSlipCd.value = maxCdSlip() + 1;<br />&nbsp;&nbsp;txtSlipDate.focus();<br /><br />&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;return false;<br />}<br /></div><br /><br />(7)関数dataDeleteSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。<br /><div class="pg"><br />function dataDeleteSlip() {<br />&nbsp;&nbsp;//データを削除する関数<br />&nbsp;&nbsp;if(!confirm("本当に削除しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;if(dataCheckSlip(0)){<br />&nbsp;&nbsp;&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;cstDisplay();<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearSlip();<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;alert("削除しました。");<br />&nbsp;&nbsp;}<br />}<br /></div><br /><br /><br />【details.js】<br /><br />(1)変数selectSlipをslip.js側へ移動しました。<br /><br />(2)onload、onunloadは削除しました。slip.js側で呼び出すためです。<br /><br />(3)関数init()をinitDetails()に名前を変更しました。<br /><br />(4)関数focus()、blur()、slipDisplay()はslip.jsと重複しているので削除しました。<br /><br />(5)slipChange()はslip.js側に統合しました。<br /><br />(6)selectSlip.valueで値を取得していた部分をtxtSlipCd.valueに変更しました。これは必ずしも伝票選択ボックスが選択されているとは限らないからです。<br /><br />(7)更新時にも確認メッセージを表示するようにしました。<br />if(!confirm("本当に更新しますか？")){<br />&nbsp;&nbsp;return ;<br />}<br /><br />(8)明細を選択しないで更新、削除しようとするとメッセージを表示するようにしました。<br />if(selectDetails.value==""){<br />&nbsp;&nbsp;alert("明細が選択されていません。");<br />&nbsp;&nbsp;return ;<br />}<br /><br /><br />【まとめ】<br /><br />一番大きな変更はslip.js側の関数slipChange()、newSlip()、dataDeleteSlip()です。これらの変更は伝票側の操作が明細へ影響することがあり、調整が必要だからです。<br /><br />関数dataDeleteSlip()では伝票側の処理をわざわざ分けていますが、テキストボックスのクリアが明細に影響するので、先に明細の処理を行っています。<br /><br />あとは全体の動きを確認しながら、プログラムの順番を入れ替えたり微調整しています。<br /><br /><br />【販売伝票のダウンロード】<br />伝票と明細を結合した完成版です。<br /><a href="http://java-script.up.seesaa.net/web/slipDetails.zip" alt="slipDetails.zip" target="_blank">slipDetails.zip</a><br /><br />データベースをまだ入手していない方は一緒にダウンロードしてください。<br /><a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a><br />データベース「SampleDB010.mdb」はCドライブの直下に保存します。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45700813.html">
<link>https://java-script.seesaa.net/article/45700813.html</link>
<title>販売伝票 動作確認</title>
<description>伝票と明細を結合したシステムが上手く動くか動作を確認してみましょう。【1】slip.html をダブルクリックしてWebブラウザで開きます。★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。【2】販売伝票が表示されました。伝票と明細が1つの画面に表示されています。水平線の上が伝票で下が明細です。【3】伝票選択ボックスで、伝票番号「10」を選択します。【4】伝票番号「10..</description>
<dc:subject>Step54・販売伝票 動作確認</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-23T16:46:21+09:00</dc:date>
<content:encoded><![CDATA[
伝票と明細を結合したシステムが上手く動くか動作を確認してみましょう。<br /><br />【1】slip.html をダブルクリックしてWebブラウザで開きます。<br /><br />★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。<br /><br /><br />【2】販売伝票が表示されました。伝票と明細が1つの画面に表示されています。水平線の上が伝票で下が明細です。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-248.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-248-thumbnail2.gif" alt="javascript-248.gif" width="147" height="150" border="0" /></a><br /><br /><br />【3】伝票選択ボックスで、伝票番号「10」を選択します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-249.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-249-thumbnail2.gif" alt="javascript-249.gif" width="150" height="144" border="0" /></a><br /><br /><br />【4】伝票番号「10」のデータが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-250.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-250-thumbnail2.gif" alt="javascript-250.gif" width="143" height="150" border="0" /></a><br /><br /><br />【5】次は伝票選択ボックスで、伝票番号「23」を選択します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-251.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-251-thumbnail2.gif" alt="javascript-251.gif" width="149" height="119" border="0" /></a><br /><br /><br />【6】伝票番号「23」のデータが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-252.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-252-thumbnail2.gif" alt="javascript-252.gif" width="140" height="150" border="0" /></a><br /><br /><br />【7】「伝票新規」をクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-253.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-253-thumbnail2.gif" alt="javascript-253.gif" width="140" height="150" border="0" /></a><br /><br /><br />【8】SLIP_CDに最大値にプラス1した値が自動で入力されます。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-254.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-254-thumbnail2.gif" alt="javascript-254.gif" width="139" height="150" border="0" /></a><br /><br /><br />【9】SLIP_DATEに日付を入力します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-255.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-255-thumbnail2.gif" alt="javascript-255.gif" width="150" height="134" border="0" /></a><br /><br /><br />【10】顧客を選択します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-256.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-256-thumbnail2.gif" alt="javascript-256.gif" width="150" height="125" border="0" /></a><br /><br /><br />【11】住所が自動で表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-257.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-257-thumbnail2.gif" alt="javascript-257.gif" width="150" height="132" border="0" /></a><br /><br /><br />【12】「伝票追加」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-258.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-258-thumbnail2.gif" alt="javascript-258.gif" width="150" height="138" border="0" /></a><br /><br /><br />【13】伝票が追加されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-259.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-259-thumbnail2.gif" alt="javascript-259.gif" width="150" height="128" border="0" /></a><br /><br /><br />【14】SLIP_DATEとCST_CDを変更します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-260.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-260-thumbnail2.gif" alt="javascript-260.gif" width="150" height="131" border="0" /></a><br /><br /><br />【15】「伝票更新」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-261.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-261-thumbnail2.gif" alt="javascript-261.gif" width="150" height="131" border="0" /></a><br /><br /><br />【16】確認のメッセージが表示されるので、「OK」をクリックします。<br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-262.gif" alt="javascript-262.gif" width="224" height="122" border="0" /><br /><br /><br />【17】伝票が更新されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-263.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-263-thumbnail2.gif" alt="javascript-263.gif" width="150" height="128" border="0" /></a><br /><br /><br />【18】「明細新規」をクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-264.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-264-thumbnail2.gif" alt="javascript-264.gif" width="150" height="136" border="0" /></a><br /><br /><br />【19】商品選択ボックスにフォーカスが移動しました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-265.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-265-thumbnail2.gif" alt="javascript-265.gif" width="139" height="150" border="0" /></a><br /><br /><br />【20】商品を選択します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-266.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-266-thumbnail2.gif" alt="javascript-266.gif" width="150" height="130" border="0" /></a><br /><br /><br />【21】AMOUNTとMEMOを入力します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-267.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-267-thumbnail2.gif" alt="javascript-267.gif" width="150" height="125" border="0" /></a><br /><br /><br />【22】「明細追加」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-268.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-268-thumbnail2.gif" alt="javascript-268.gif" width="150" height="125" border="0" /></a><br /><br /><br />【23】明細が追加されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-269.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-269-thumbnail2.gif" alt="javascript-269.gif" width="150" height="105" border="0" /></a><br /><br /><br />【24】そのまま「明細更新」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-270.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-270-thumbnail2.gif" alt="javascript-270.gif" width="150" height="124" border="0" /></a><br /><br /><br />【25】明細を選択しないで更新しようとしたので、メッセージが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-271.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-271-thumbnail2.gif" alt="javascript-271.gif" width="150" height="103" border="0" /></a><br /><br /><br />【26】今度は明細を選択します。明細のデータが上に反映します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-272.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-272-thumbnail2.gif" alt="javascript-272.gif" width="150" height="131" border="0" /></a><br /><br /><br />【27】GOODS_CD、AMOUNT、MEMOを変更して、「明細更新」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-273.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-273-thumbnail2.gif" alt="javascript-273.gif" width="150" height="122" border="0" /></a><br /><br /><br />【28】確認のメッセージが表示されるので、「OK」をクリックします。<br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-274.gif" alt="javascript-274.gif" width="220" height="121" border="0" /><br /><br /><br />【29】明細が更新されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-275.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-275-thumbnail2.gif" alt="javascript-275.gif" width="150" height="106" border="0" /></a><br /><br /><br />【30】明細にレコードを3件以上追加してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-276.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-276-thumbnail2.gif" alt="javascript-276.gif" width="150" height="130" border="0" /></a><br /><br /><br />【31】明細の一番下のレコードを選択します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-277.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-277-thumbnail2.gif" alt="javascript-277.gif" width="150" height="127" border="0" /></a><br /><br /><br />【32】「明細削除」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-278.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-278-thumbnail2.gif" alt="javascript-278.gif" width="150" height="127" border="0" /></a><br /><br /><br />【33】確認のメッセージが表示されるので、「OK」をクリックします。<br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-279.gif" alt="javascript-279.gif" width="221" height="122" border="0" /><br /><br /><br />【34】明細が削除されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-280.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-280-thumbnail2.gif" alt="javascript-280.gif" width="150" height="108" border="0" /></a><br /><br /><br />【35】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、新しく作成した伝票に対応する明細が表示されています。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-281.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-281-thumbnail2.gif" alt="javascript-281.gif" width="121" height="150" border="0" /></a><br /><br />これから伝票を削除すると対応する明細も全て削除されることを確認します。<br /><br /><br />【36】「伝票削除」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-282.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-282-thumbnail2.gif" alt="javascript-282.gif" width="150" height="125" border="0" /></a><br /><br /><br />【37】確認のメッセージが表示されるので、「OK」をクリックします。<br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-283.gif" alt="javascript-283.gif" width="219" height="118" border="0" /><br /><br /><br />【38】伝票が削除されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-284.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-284-thumbnail2.gif" alt="javascript-284.gif" width="150" height="99" border="0" /></a><br /><br /><br />【39】明細の表示も消えています。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-285.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-285-thumbnail2.gif" alt="javascript-285.gif" width="150" height="131" border="0" /></a><br /><br /><br />【40】データベースSampleDB010.mdbのテーブルT08Detailsを見ると、伝票に対応していた明細が全て削除されていることがわかります。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-286.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-286-thumbnail2.gif" alt="javascript-286.gif" width="118" height="150" border="0" /></a><br /><br /><br />【ポイント】<br /><br />(1)伝票にあるSLIP_CDは「伝票新規の時にだけ変更」できます。いったん伝票を作成したらそれ以降は表示されている値を変更しないでください。伝票の更新・削除や明細の追加はこの伝票番号を使っているので、変更すると不具合が出ます。<br /><br /><br />(2)明細の更新、削除は明細を選択してからでないと行えません。<br /><br /><br />(3)伝票を削除すると、対応している明細も削除するようにプログラムしています。<br /><br /><br />【販売伝票のダウンロード】<br />伝票と明細を結合した完成版です。<br /><a href="http://java-script.up.seesaa.net/web/slipDetails.zip" alt="slipDetails.zip" target="_blank">slipDetails.zip</a><br /><br />データベースをまだ入手していない方は一緒にダウンロードしてください。<br /><a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a><br />データベース「SampleDB010.mdb」はCドライブの直下に保存します。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45634352.html">
<link>https://java-script.seesaa.net/article/45634352.html</link>
<title>販売伝票 結合</title>
<description>いよいよ販売伝票の仕上げです。これまで別々に作ってきた伝票（slip）と明細（Details）を一つにまとめます。結構本格的なシステムになってきましたね。完成図【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。slipDetails.zipからダウンロードすることもできます。slip.html&amp;lt;html&amp;gt;&amp;nbsp;&amp;nbsp;&amp;lt;head&amp;gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;..</description>
<dc:subject>Step53・販売伝票 結合</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-22T22:24:48+09:00</dc:date>
<content:encoded><![CDATA[
いよいよ販売伝票の仕上げです。これまで別々に作ってきた伝票（slip）と明細（Details）を一つにまとめます。結構本格的なシステムになってきましたね。<br /><br />完成図<br /><a href="http://java-script.up.seesaa.net/image/javascript-247.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-247-thumbnail2.gif" alt="javascript-247.gif" width="141" height="150" border="0" /></a><br /><br /><br />【1】以下のように slip.html、slip.js、details.js を更新します。他は前回までと同じです。<a href="http://java-script.up.seesaa.net/web/slipDetails.zip" alt="slipDetails.zip" target="_blank">slipDetails.zip</a>からダウンロードすることもできます。<br /><br />slip.html<br /><div class="pg"><br />&lt;html&gt;<br />&nbsp;&nbsp;&lt;head&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="database.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="slip.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="details.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="base.css" rel="stylesheet" type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="slip.css" rel="stylesheet" type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;slip&lt;/title&gt;<br />&nbsp;&nbsp;&lt;/head&gt;<br />&nbsp;&nbsp;&lt;body&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;販売伝票<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id="slipDisplay"&gt;&lt;/span&gt;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="" name="linkNewSlip" id="linkNewSlip"&gt;伝票新規&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;form name="form1"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnInsertSlip" id="btnInsertSlip" value="伝票追加"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnUpdateSlip" id="btnUpdateSlip" value="伝票更新"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnDeleteSlip" id="btnDeleteSlip" value="伝票削除"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SLIP_CD:&lt;input type="text" name="txtSlipCd" id="txtSlipCd"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SLIP_DATE:&lt;input type="text" name="txtSlipDate" id="txtSlipDate"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CST_CD:&lt;span id="customerDisplay"&gt;&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id="addressDisplay"&gt;&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;hr /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="" name="linkNewDetails" id="linkNewDetails"&gt;明細新規&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;form name="form2"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnInsertDetails" id="btnInsertDetails" value="明細追加"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnUpdateDetails" id="btnUpdateDetails" value="明細更新"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnDeleteDetails" id="btnDeleteDetails" value="明細削除"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GOODS_CD:&lt;span id="goodsDisplay"&gt;&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AMOUNT:&lt;input type="text" name="txtAmount" id="txtAmount"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEMO:&lt;input type="text" name="txtMemo" id="txtMemo"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="detailsDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="totalDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="sqlDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&lt;/body&gt;<br />&lt;/html&gt;<br /></div><br /><br /><br />slip.css<br /><div class="pg"><br />#selectDetails {<br />&nbsp;&nbsp;width: 600px;<br />}<br /></div><br /><br /><br />slip.js<br /><div class="pg"><br />var txtSlipCd;<br />var txtSlipDate;<br />var selectSlip;<br />var selectCst;<br /><br />onload = function (){initSlip();initDetails();}<br />onunload = dbClose;<br /><br />function initSlip() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtSlipCd = document.getElementById("txtSlipCd");<br />&nbsp;&nbsp;txtSlipDate = document.getElementById("txtSlipDate");<br /><br />&nbsp;&nbsp;txtSlipCd.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtSlipCd.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtSlipDate.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtSlipDate.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}<br />&nbsp;&nbsp;document.getElementById("linkNewSlip").onclick = function (){return newSlip();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;cstDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectSlip = document.getElementById("selectSlip");<br />&nbsp;&nbsp;selectSlip.onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"from T07Slip,T04Customer ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"and SLIP_CD = " + obj.value ;<br />&nbsp;&nbsp;&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipCd.value = recordSet(0);<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipDate.value = dateFormat(recordSet(1));<br />&nbsp;&nbsp;&nbsp;&nbsp;selectCst.selectedIndex = cstIndexSearch(recordSet(2));<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function cstDisplay() {<br />&nbsp;&nbsp;//顧客を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("customerDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectCst\" id=\"selectCst\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("customerDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectCst = document.getElementById("selectCst");<br />&nbsp;&nbsp;selectCst.onchange = function (){cstChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function cstChange(obj) {<br />&nbsp;&nbsp;//顧客を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("顧客を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;<br />&nbsp;&nbsp;&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet = null;<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newSlip(){<br />&nbsp;&nbsp;//伝票を新規作成する関数<br /><br />&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;txtSlipCd.value = maxCdSlip() + 1;<br />&nbsp;&nbsp;txtSlipDate.focus();<br /><br />&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function maxCdSlip(){<br />&nbsp;&nbsp;//SLIP_CDの最大値を取得する関数<br />&nbsp;&nbsp;var mySql = "select max(SLIP_CD) from T07Slip";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var maxCd = recordSet(0);<br />&nbsp;&nbsp;return maxCd;<br />}<br /><br /><br />function textClearSlip() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtSlipCd.value = "";<br />&nbsp;&nbsp;txtSlipDate.value = "";<br />}<br /><br /><br />function dataInsertSlip() {<br />&nbsp;&nbsp;//データを追加する関数<br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckSlip(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T07Slip values(" ;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtSlipCd.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtSlipDate.value + "', ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectCst.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataUpdateSlip() {<br />&nbsp;&nbsp;//データを更新する関数<br />&nbsp;&nbsp;if(!confirm("本当に更新しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if(dataCheckSlip(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "update T07Slip set ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "CST_CD = " + Number(selectCst.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("更新しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataDeleteSlip() {<br />&nbsp;&nbsp;//データを削除する関数<br />&nbsp;&nbsp;if(!confirm("本当に削除しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;if(dataCheckSlip(0)){<br />&nbsp;&nbsp;&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;cstDisplay();<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//明細側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;//伝票側の処理<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearSlip();<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;alert("削除しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckSlip(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (txtSlipCd.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_CD" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (txtSlipCd.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_CDには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipCd.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtSlipDate.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_DATE" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && !txtSlipDate.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_DATEは「yyyy/mm/dd」形式で入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && selectCst.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("CST_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function cstIndexSearch(cstCd){<br />&nbsp;&nbsp;//顧客選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD &lt;= " + cstCd + " order by CST_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var cstIndex = recordSet(0);<br />&nbsp;&nbsp;return cstIndex;<br />}<br /></div><br /><br /><br />details.js<br /><div class="pg"><br />var txtAmount;<br />var txtMemo;<br />var selectGoods;<br /><br /><br />function initDetails() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtAmount = document.getElementById("txtAmount");<br />&nbsp;&nbsp;txtMemo = document.getElementById("txtMemo");<br /><br />&nbsp;&nbsp;txtAmount.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtAmount.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtMemo.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtMemo.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}<br />&nbsp;&nbsp;document.getElementById("linkNewDetails").onclick = function (){return newDetails();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;goodsDisplay();<br />}<br /><br /><br />function detailsDisplay() {<br />&nbsp;&nbsp;//明細を表示する関数<br />&nbsp;&nbsp;var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";<br />&nbsp;&nbsp;mySql = mySql + "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql = mySql + "and SLIP_CD = " + txtSlipCd.value;<br />&nbsp;&nbsp;mySql = mySql + " order by DETAILS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select size=\"10\" name=\"selectDetails\" id=\"selectDetails\"&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [MEMO]:" + recordSet(5);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;totalDisplay();<br />}<br /><br /><br />function detailsChange(obj) {<br />&nbsp;&nbsp;//明細を選択した時の関数<br />&nbsp;&nbsp;var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql +"from T08Details ";<br />&nbsp;&nbsp;mySql = mySql +"where Details_CD = " + obj.value ;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br />&nbsp;&nbsp;txtAmount.value = recordSet(1);<br />&nbsp;&nbsp;txtMemo.value = recordSet(2);<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />}<br /><br /><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function goodsChange(obj) {<br />&nbsp;&nbsp;//商品を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("商品を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newDetails(){<br />&nbsp;&nbsp;//明細を新規作成する関数<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;selectGoods.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function textClearDetails() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtAmount.value = "";<br />&nbsp;&nbsp;txtMemo.value = "";<br />}<br /><br /><br />function dataInsertDetails() {<br />&nbsp;&nbsp;//データを追加する関数<br /><br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "values(";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtSlipCd.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectGoods.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtAmount.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataUpdateDetails() {<br />&nbsp;&nbsp;//データを更新する関数<br />&nbsp;&nbsp;if(selectDetails.value==""){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("明細が選択されていません。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if(!confirm("本当に更新しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "update T08Details set ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",MEMO = '" + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + " where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("更新しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataDeleteDetails() {<br />&nbsp;&nbsp;//データを削除する関数<br />&nbsp;&nbsp;if(selectDetails.value==""){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("明細が選択されていません。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if(!confirm("本当に削除しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if(dataCheckDetails(0)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("削除しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckDetails(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (flag == 1 && selectGoods.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("GOODS_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNT" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNTには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtAmount.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtMemo.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("Memo" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function goodsIndexSearch(goodsCd){<br />&nbsp;&nbsp;//商品選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD &lt;= " + goodsCd + " order by GOODS_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var goodsIndex = recordSet(0);<br />&nbsp;&nbsp;return goodsIndex;<br />}<br /><br /><br />function totalDisplay(){<br />&nbsp;&nbsp;//明細のtotalを計算する関数<br />&nbsp;&nbsp;var mySql = "select sum(PRICE * AMOUNT) ";<br />&nbsp;&nbsp;mySql += "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql += "and SLIP_CD = " + txtSlipCd.value;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var tempHtml = "TOTAL:" + recordSet(0) + "円";<br />&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = tempHtml;<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /></div><br /><br /><br />【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。<br /><br />★slip.html、base.css、slip.css、database.js、slip.js、details.js は必ず同じフォルダ内に置いてください。<br /><br /><br />【販売伝票のダウンロード】<br />伝票と明細を結合した完成版です。<br /><a href="http://java-script.up.seesaa.net/web/slipDetails.zip" alt="slipDetails.zip" target="_blank">slipDetails.zip</a><br /><br />データベースをまだ入手していない方は一緒にダウンロードしてください。<br /><a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a><br />データベース「SampleDB010.mdb」はCドライブの直下に保存します。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45626430.html">
<link>https://java-script.seesaa.net/article/45626430.html</link>
<title>明細 単価×数量の表示</title>
<description>これまで明細には「単価×数量」がありませんでした。そのままだと商品ごとの購入金額がわからないので、以下のように表示する方法を試してみましょう。明細の表示を変えるには関数detailsDisplay()の中のSQL文と、表示方法を変更するだけです。【1】以下のように details.js を更新します。他は前回までと同じです。details.htmlvar txtAmount;var txtMemo;var selectSlip;var selectGoods;onload =..</description>
<dc:subject>Step52・明細 単価×数量の表示</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-22T20:40:47+09:00</dc:date>
<content:encoded><![CDATA[
これまで明細には「単価×数量」がありませんでした。そのままだと商品ごとの購入金額がわからないので、以下のように表示する方法を試してみましょう。<br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-244.gif" alt="javascript-244.gif" width="395" height="66" border="0" /><br /><br />明細の表示を変えるには関数detailsDisplay()の中のSQL文と、表示方法を変更するだけです。<br /><br />【1】以下のように details.js を更新します。他は前回までと同じです。<br /><br />details.html<br /><div class="pg"><br />var txtAmount;<br />var txtMemo;<br />var selectSlip;<br />var selectGoods;<br /><br />onload = init;<br />onunload = dbClose;<br /><br />function init() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtAmount = document.getElementById("txtAmount");<br />&nbsp;&nbsp;txtMemo = document.getElementById("txtMemo");<br /><br />&nbsp;&nbsp;txtAmount.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtAmount.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtMemo.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtMemo.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}<br />&nbsp;&nbsp;document.getElementById("linkNewDetails").onclick = function (){return newDetails();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;goodsDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectSlip = document.getElementById("selectSlip");<br />&nbsp;&nbsp;selectSlip.onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function detailsDisplay() {<br />&nbsp;&nbsp;//明細を表示する関数<br />&nbsp;&nbsp;var mySql = "select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO ";<br />&nbsp;&nbsp;mySql = mySql + "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql = mySql + "and SLIP_CD = " + selectSlip.value;<br />&nbsp;&nbsp;mySql = mySql + " order by DETAILS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select size=\"10\" name=\"selectDetails\" id=\"selectDetails\"&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(1) + " [PRICE]:" + recordSet(2);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [AMOUNT]:" + recordSet(3) + " [P*A]:" + recordSet(4);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [MEMO]:" + recordSet(5);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;totalDisplay();<br />}<br /><br /><br />function detailsChange(obj) {<br />&nbsp;&nbsp;//明細を選択した時の関数<br />&nbsp;&nbsp;var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql +"from T08Details ";<br />&nbsp;&nbsp;mySql = mySql +"where Details_CD = " + obj.value ;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br />&nbsp;&nbsp;txtAmount.value = recordSet(1);<br />&nbsp;&nbsp;txtMemo.value = recordSet(2);<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />}<br /><br /><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function goodsChange(obj) {<br />&nbsp;&nbsp;//商品を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("商品を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newDetails(){<br />&nbsp;&nbsp;//明細を新規作成する関数<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;selectGoods.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function textClearDetails() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtAmount.value = "";<br />&nbsp;&nbsp;txtMemo.value = "";<br />}<br /><br /><br />function dataInsertDetails() {<br />&nbsp;&nbsp;//データを追加する関数<br /><br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "values(";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectSlip.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectGoods.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtAmount.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataUpdateDetails() {<br />&nbsp;&nbsp;//データを更新する関数<br />&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "update T08Details set ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",MEMO = '" + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + " where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("更新しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataDeleteDetails() {<br />&nbsp;&nbsp;//データを削除する関数<br />&nbsp;&nbsp;if(!confirm("本当に削除しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;if(dataCheckDetails(0)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("削除しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckDetails(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (flag == 1 && selectGoods.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("GOODS_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNT" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNTには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtAmount.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtMemo.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("Memo" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function goodsIndexSearch(goodsCd){<br />&nbsp;&nbsp;//商品選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD &lt;= " + goodsCd + " order by GOODS_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var goodsIndex = recordSet(0);<br />&nbsp;&nbsp;return goodsIndex;<br />}<br /><br /><br />function totalDisplay(){<br />&nbsp;&nbsp;//明細のtotalを計算する関数<br />&nbsp;&nbsp;var mySql = "select sum(PRICE * AMOUNT) ";<br />&nbsp;&nbsp;mySql += "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql += "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql += "and SLIP_CD = " + selectSlip.value;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var tempHtml = "TOTAL:" + recordSet(0) + "円";<br />&nbsp;&nbsp;document.getElementById("totalDisplay").innerHTML = tempHtml;<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /></div><br /><br /><br />【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。<br /><br />★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。<br /><br />★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、<a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a>をダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。<br /><br /><br />【3】明細が表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-192.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-192-thumbnail2.gif" alt="javascript-192.gif" width="150" height="119" border="0" /></a><br /><br /><br />【4】伝票選択ボックスから伝票番号「23」を選んでください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-193.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-193-thumbnail2.gif" alt="javascript-193.gif" width="150" height="126" border="0" /></a><br /><br /><br />【5】単価×数量が表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-243.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-243-thumbnail2.gif" alt="javascript-243.gif" width="150" height="146" border="0" /></a><br /><br /><br />【解説】<br /><br />(1)関数detailsDisplay()のSQL文<br /><br />DETAILS_CDは表示しませんが、選択ボックスのvalueとして必要です。<br /><br />select DETAILS_CD,GOODS_NAME,PRICE,AMOUNT,(PRICE * AMOUNT),MEMO<br />from T08Details,T06Goods <br />where T08Details.GOODS_CD = T06Goods.GOODS_CD <br />and SLIP_CD = 23 <br />order by DETAILS_CD<br /><br />実行結果<br /><img src="http://java-script.up.seesaa.net/image/javascript-245.gif" alt="javascript-245.gif" width="510" height="101" border="0" /><br /><br /><br />(2)表示部分をいろいろ工夫すると明細がもっと見やすくなると思います。<br /><br /><div class="pg"><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /></div><br /><br />実行結果<br /><a href="http://java-script.up.seesaa.net/image/javascript-246.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-246-thumbnail2.gif" alt="javascript-246.gif" width="145" height="150" border="0" /></a><br /><br /><br />【明細のダウンロード】<br />今回までの改良を含むDetailsです。<br /><a href="http://java-script.up.seesaa.net/web/details2.zip" alt="details2.zip" target="_blank">details2.zip</a><br /><br />データベースをまだ入手していない方は一緒にダウンロードしてください。<br /><a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a><br />データベース「SampleDB010.mdb」はCドライブの直下に保存します。<br /><br /><br /><a name="more"></a>

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

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

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45597141.html">
<link>https://java-script.seesaa.net/article/45597141.html</link>
<title>明細 削除</title>
<description>明細の削除は関数dataDeleteDetails()で行います。データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。削除はSQL文も簡単なのでもうひといきです。【1】以下のように details.js を更新します。他は前回までと同じです。details.jsvar txtAmount;var txtMemo;var selectSlip;var selectGoods;onload = init;onunload = dbClose..</description>
<dc:subject>Step49・明細 削除</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-22T14:27:11+09:00</dc:date>
<content:encoded><![CDATA[
明細の削除は関数dataDeleteDetails()で行います。データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。削除はSQL文も簡単なのでもうひといきです。<br /><br />【1】以下のように details.js を更新します。他は前回までと同じです。<br /><br />details.js<br /><div class="pg"><br />var txtAmount;<br />var txtMemo;<br />var selectSlip;<br />var selectGoods;<br /><br />onload = init;<br />onunload = dbClose;<br /><br />function init() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtAmount = document.getElementById("txtAmount");<br />&nbsp;&nbsp;txtMemo = document.getElementById("txtMemo");<br /><br />&nbsp;&nbsp;txtAmount.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtAmount.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtMemo.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtMemo.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}<br />&nbsp;&nbsp;document.getElementById("linkNewDetails").onclick = function (){return newDetails();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;goodsDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectSlip = document.getElementById("selectSlip");<br />&nbsp;&nbsp;selectSlip.onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function detailsDisplay() {<br />&nbsp;&nbsp;//明細を表示する関数<br />&nbsp;&nbsp;var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql + "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql = mySql + "and SLIP_CD = " + selectSlip.value;<br />&nbsp;&nbsp;mySql = mySql + " order by DETAILS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select size=\"10\" name=\"selectDetails\" id=\"selectDetails\"&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml +"[DETAILS_CD]:" + recordSet(0) + " [SLIP_CD]:" + recordSet(1);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(2) + " [PRICE]:" + recordSet(3);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [AMOUNT]:" + recordSet(4) + " [MEMO]:" + recordSet(5);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function detailsChange(obj) {<br />&nbsp;&nbsp;//明細を選択した時の関数<br />&nbsp;&nbsp;var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql +"from T08Details ";<br />&nbsp;&nbsp;mySql = mySql +"where Details_CD = " + obj.value ;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br />&nbsp;&nbsp;txtAmount.value = recordSet(1);<br />&nbsp;&nbsp;txtMemo.value = recordSet(2);<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br /><br />}<br /><br /><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function goodsChange(obj) {<br />&nbsp;&nbsp;//商品を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("商品を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newDetails(){<br />&nbsp;&nbsp;//明細を新規作成する関数<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;selectGoods.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function textClearDetails() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtAmount.value = "";<br />&nbsp;&nbsp;txtMemo.value = "";<br />}<br /><br /><br />function dataInsertDetails() {<br />&nbsp;&nbsp;//データを追加する関数<br /><br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "values(";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectSlip.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectGoods.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtAmount.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataUpdateDetails() {<br />&nbsp;&nbsp;//データを更新する関数<br />&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "update T08Details set ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",MEMO = '" + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + " where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("更新しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataDeleteDetails() {<br />&nbsp;&nbsp;//データを削除する関数<br />&nbsp;&nbsp;if(!confirm("本当に削除しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;if(dataCheckDetails(0)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T08Details where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("削除しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckDetails(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (flag == 1 && selectGoods.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("GOODS_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNT" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNTには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtAmount.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtMemo.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("Memo" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function goodsIndexSearch(goodsCd){<br />&nbsp;&nbsp;//商品選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD &lt;= " + goodsCd + " order by GOODS_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var goodsIndex = recordSet(0);<br />&nbsp;&nbsp;return goodsIndex;<br />}<br /></div><br /><br /><br />【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。<br /><br />★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。<br /><br />★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、<a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a>をダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。<br /><br /><br />【3】明細が表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-192.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-192-thumbnail2.gif" alt="javascript-192.gif" width="150" height="119" border="0" /></a><br /><br /><br />【4】伝票選択ボックスから伝票番号「23」を選んでください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-193.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-193-thumbnail2.gif" alt="javascript-193.gif" width="150" height="126" border="0" /></a><br /><br /><br />【5】更新のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-215.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-215-thumbnail2.gif" alt="javascript-215.gif" width="150" height="130" border="0" /></a><br /><br /><br />【6】DETAILS_CD「63」をクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-216.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-216-thumbnail2.gif" alt="javascript-216.gif" width="150" height="131" border="0" /></a><br /><br /><br />【7】このとき明細選択ボックスのvalueは「63」になっています。削除ではこの値を使います。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-217.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-217-thumbnail2.gif" alt="javascript-217.gif" width="150" height="131" border="0" /></a><br /><br /><br />【8】「明細削除」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-224.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-224-thumbnail2.gif" alt="javascript-224.gif" width="150" height="74" border="0" /></a><br /><br /><br />【9】確認メッセージが表示されますので、「OK」をクリックします。<br /><a href="http://java-script.up.seesaa.net/image/javascript-218.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-218-thumbnail2.gif" alt="javascript-218.gif" width="150" height="113" border="0" /></a><br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-219.gif" alt="javascript-219.gif" width="220" height="121" border="0" /><br /><br /><br />【10】削除しましたというメッセージが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-220.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-220-thumbnail2.gif" alt="javascript-220.gif" width="150" height="107" border="0" /></a><br /><br /><br />【11】明細のレコードが1件削除されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-221.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-221-thumbnail2.gif" alt="javascript-221.gif" width="150" height="129" border="0" /></a><br /><br /><br />【12】削除のSQL文が正しく作成されていることを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-222.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-222-thumbnail2.gif" alt="javascript-222.gif" width="150" height="129" border="0" /></a><br /><br /><br />【13】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが削除されていることを確認します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-223.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-223-thumbnail2.gif" alt="javascript-223.gif" width="124" height="150" border="0" /></a><br /><br /><br />【解説】<br /><br />（1）関数dataDeleteDetails()では削除のSQL文を作成し、データを削除しています。<br /><br />削除の時はDETAILS_CDが重要です。DETAILS_CDは明細選択ボックスの値を使います。値は「selectDetails.value」で取得できます。<br /><br />＊必ず選択ボックスで選択してから「明細削除」ボタンをクリックしてください。選択しないで削除しようとするとエラーになります。<br /><br /><br />【SQL文の組み立て方】<br /><br />最終的に組み立てたいSQL文です。<br />delete from T08Details where Details_CD = 63<br /><br />全体を「"」（ダブルクォーテーション）で囲みます。<br />"delete from T08Details where Details_CD = 63"<br /><br />値をコントロールや変数に置き換えます。<br />"delete from T08Details where Details_CD = Number(selectDetails.value)"<br /><br />コントロールや変数の前後に半角空白を入れ切り離します。<br />"delete from T08Details where Details_CD =  Number(selectDetails.value) "<br /><br />コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。<br />"delete from T08Details where Details_CD ="  Number(selectDetails.value)<br /><br />コントロールや変数と文字列を「+」で結合します。<br />"delete from T08Details where Details_CD =" + Number(selectDetails.value)<br /><br />変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。<br />var mySql = "delete from T08Details where Details_CD =" + Number(selectDetails.value);<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45591709.html">
<link>https://java-script.seesaa.net/article/45591709.html</link>
<title>明細 更新</title>
<description>明細の更新は関数dataUpdateDetails()で行います。入力データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。【1】以下のように details.js を更新します。他は前回までと同じです。details.jsvar txtAmount;var txtMemo;var selectSlip;var selectGoods;onload = init;onunload = dbClose;function init() {&amp;n..</description>
<dc:subject>Step48・明細 更新</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-22T13:35:48+09:00</dc:date>
<content:encoded><![CDATA[
明細の更新は関数dataUpdateDetails()で行います。入力データをチェックする関数dataCheckDetails()は追加の時と同じものを使います。<br /><br />【1】以下のように details.js を更新します。他は前回までと同じです。<br /><br />details.js<br /><div class="pg"><br />var txtAmount;<br />var txtMemo;<br />var selectSlip;<br />var selectGoods;<br /><br />onload = init;<br />onunload = dbClose;<br /><br />function init() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtAmount = document.getElementById("txtAmount");<br />&nbsp;&nbsp;txtMemo = document.getElementById("txtMemo");<br /><br />&nbsp;&nbsp;txtAmount.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtAmount.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtMemo.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtMemo.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}<br />&nbsp;&nbsp;document.getElementById("linkNewDetails").onclick = function (){return newDetails();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;goodsDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectSlip = document.getElementById("selectSlip");<br />&nbsp;&nbsp;selectSlip.onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function detailsDisplay() {<br />&nbsp;&nbsp;//明細を表示する関数<br />&nbsp;&nbsp;var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql + "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql = mySql + "and SLIP_CD = " + selectSlip.value;<br />&nbsp;&nbsp;mySql = mySql + " order by DETAILS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select size=\"10\" name=\"selectDetails\" id=\"selectDetails\"&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml +"[DETAILS_CD]:" + recordSet(0) + " [SLIP_CD]:" + recordSet(1);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(2) + " [PRICE]:" + recordSet(3);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [AMOUNT]:" + recordSet(4) + " [MEMO]:" + recordSet(5);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function detailsChange(obj) {<br />&nbsp;&nbsp;//明細を選択した時の関数<br />&nbsp;&nbsp;var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql +"from T08Details ";<br />&nbsp;&nbsp;mySql = mySql +"where Details_CD = " + obj.value ;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br />&nbsp;&nbsp;txtAmount.value = recordSet(1);<br />&nbsp;&nbsp;txtMemo.value = recordSet(2);<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br /><br />}<br /><br /><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function goodsChange(obj) {<br />&nbsp;&nbsp;//商品を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("商品を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newDetails(){<br />&nbsp;&nbsp;//明細を新規作成する関数<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;selectGoods.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function textClearDetails() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtAmount.value = "";<br />&nbsp;&nbsp;txtMemo.value = "";<br />}<br /><br /><br />function dataInsertDetails() {<br />&nbsp;&nbsp;//データを追加する関数<br /><br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "values(";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectSlip.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectGoods.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtAmount.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataUpdateDetails() {<br />&nbsp;&nbsp;//データを更新する関数<br />&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "update T08Details set ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + ",MEMO = '" + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + " where Details_CD = " + Number(selectDetails.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("更新しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckDetails(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (flag == 1 && selectGoods.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("GOODS_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNT" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNTには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtAmount.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtMemo.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("Memo" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function goodsIndexSearch(goodsCd){<br />&nbsp;&nbsp;//商品選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD &lt;= " + goodsCd + " order by GOODS_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var goodsIndex = recordSet(0);<br />&nbsp;&nbsp;return goodsIndex;<br />}<br /></div><br /><br /><br />【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。<br /><br />★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。<br /><br />★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、<a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a>をダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。<br /><br /><br />【3】明細が表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-192.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-192-thumbnail2.gif" alt="javascript-192.gif" width="150" height="119" border="0" /></a><br /><br /><br />【4】伝票選択ボックスから伝票番号「23」を選んでください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-193.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-193-thumbnail2.gif" alt="javascript-193.gif" width="150" height="126" border="0" /></a><br /><br /><br />【5】追加のときに練習で入力したレコードがあることを確認してください。なければどのレコードでもかまいません。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-207.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-207-thumbnail2.gif" alt="javascript-207.gif" width="150" height="130" border="0" /></a><br /><br /><br />【6】DETAILS_CD「63」をクリックすると、上の選択ボックスやテキストボックスにデータが反映されます。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-208.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-208-thumbnail2.gif" alt="javascript-208.gif" width="150" height="129" border="0" /></a><br /><br /><br />【7】商品選択ボックスで「USBメモリ」を選択、AMOUNT（数量）に「2」、MEMO（メモ）に「テスト2」と入力します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-209.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-209-thumbnail2.gif" alt="javascript-209.gif" width="150" height="134" border="0" /></a><br /><br /><br />【8】「明細更新」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-210.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-210-thumbnail2.gif" alt="javascript-210.gif" width="150" height="134" border="0" /></a><br /><br /><br />【9】更新しましたというメッセージが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-211.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-211-thumbnail2.gif" alt="javascript-211.gif" width="150" height="113" border="0" /></a><br /><br /><br />【10】明細に更新したレコードが表示されました。DETAILS_CDとSLIP_CDは変わらないことを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-212.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-212-thumbnail2.gif" alt="javascript-212.gif" width="150" height="127" border="0" /></a><br /><br /><br />【11】更新のSQL文が正しく作成されていることを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-213.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-213-thumbnail2.gif" alt="javascript-213.gif" width="150" height="127" border="0" /></a><br /><br /><br />【12】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが更新されていることを確認します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-214.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-214-thumbnail2.gif" alt="javascript-214.gif" width="131" height="150" border="0" /></a><br /><br /><br />【解説】<br /><br />（1）関数dataUpdateDetails()では更新のSQL文を作成し、データを更新しています。<br /><br />更新の時はDETAILS_CDとSLIP_CDは変わりません。更新はDETAILS_CDがwhereの抽出条件となるので変わるとまずいですし、SLIP_CDが変わると明細が他の伝票に移動してしまいます。<br /><br />よって更新ではGOODS_CD、AMOUNT、MEMOが対象となります。<br /><br /><br />【SQL文の組み立て方】<br /><br />最終的に組み立てたいSQL文です。<br />update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63<br /><br />全体を「"」（ダブルクォーテーション）で囲みます。<br />"update T08Details set GOODS_CD = 9,AMOUNT = 2,MEMO = 'テスト2' where Details_CD = 63"<br /><br />値をコントロールや変数に置き換えます。<br />"update T08Details set GOODS_CD = Number(selectGoods.value),AMOUNT = Number(txtAmount.value),MEMO = 'txtMemo.value' where Details_CD = Number(selectDetails.value)"<br /><br />コントロールや変数の前後に半角空白を入れ切り離します。<br />"update T08Details set GOODS_CD =  Number(selectGoods.value) ,AMOUNT =  Number(txtAmount.value ) ,MEMO = ' txtMemo.value ' where Details_CD =  Number(selectDetails.value )"<br /><br />コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。<br />"update T08Details set GOODS_CD ="  Number(selectGoods.value) ",AMOUNT ="  Number(txtAmount.value ) ",MEMO = '" txtMemo.value "' where Details_CD ="  Number(selectDetails.value )<br /><br />コントロールや変数と文字列を「+」で結合します。<br />"update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value )<br /><br />変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。<br />var mySql = "update T08Details set GOODS_CD =" + Number(selectGoods.value) + ",AMOUNT =" + Number(txtAmount.value ) + ",MEMO = '" + txtMemo.value + "' where Details_CD =" + Number(selectDetails.value );<br /><br />上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。<br /><br />var mySql = "update T08Details set ";<br />mySql = mySql + "GOODS_CD = " + Number(selectGoods.value);<br />mySql = mySql + ",AMOUNT = " + Number(txtAmount.value);<br />mySql = mySql + ",MEMO = '" + txtMemo.value + "'";<br />mySql = mySql + " where Details_CD = " + Number(selectDetails.value);<br /><br />変数内では単純に改行できないので、<br />mySql ="この中では改行できない"<br /><br />mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。<br />mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45517571.html">
<link>https://java-script.seesaa.net/article/45517571.html</link>
<title>明細 追加</title>
<description>今回は明細にデータを追加してみましょう。2つの関数dataInsertDetails()、dataCheckDetails()を組み込むだけでできます。明細は伝票と密接な関係があるので、まず選択ボックスで伝票を選択し、SLIP_CDで伝票に関連付けて明細を追加します。【1】以下のように details.js を更新します。他は前回までと同じです。details.jsvar txtAmount;var txtMemo;var selectSlip;var selectGoods..</description>
<dc:subject>Step47・明細 追加</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-21T22:25:22+09:00</dc:date>
<content:encoded><![CDATA[
今回は明細にデータを追加してみましょう。2つの関数dataInsertDetails()、dataCheckDetails()を組み込むだけでできます。<br /><br />明細は伝票と密接な関係があるので、まず選択ボックスで伝票を選択し、SLIP_CDで伝票に関連付けて明細を追加します。<br /><br />【1】以下のように details.js を更新します。他は前回までと同じです。<br /><br />details.js<br /><div class="pg"><br />var txtAmount;<br />var txtMemo;<br />var selectSlip;<br />var selectGoods;<br /><br />onload = init;<br />onunload = dbClose;<br /><br />function init() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtAmount = document.getElementById("txtAmount");<br />&nbsp;&nbsp;txtMemo = document.getElementById("txtMemo");<br /><br />&nbsp;&nbsp;txtAmount.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtAmount.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtMemo.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtMemo.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}<br />&nbsp;&nbsp;document.getElementById("linkNewDetails").onclick = function (){return newDetails();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;goodsDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectSlip = document.getElementById("selectSlip");<br />&nbsp;&nbsp;selectSlip.onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function detailsDisplay() {<br />&nbsp;&nbsp;//明細を表示する関数<br />&nbsp;&nbsp;var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql + "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql = mySql + "and SLIP_CD = " + selectSlip.value;<br />&nbsp;&nbsp;mySql = mySql + " order by DETAILS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select size=\"10\" name=\"selectDetails\" id=\"selectDetails\"&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml +"[DETAILS_CD]:" + recordSet(0) + " [SLIP_CD]:" + recordSet(1);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(2) + " [PRICE]:" + recordSet(3);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [AMOUNT]:" + recordSet(4) + " [MEMO]:" + recordSet(5);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function detailsChange(obj) {<br />&nbsp;&nbsp;//明細を選択した時の関数<br />&nbsp;&nbsp;var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql +"from T08Details ";<br />&nbsp;&nbsp;mySql = mySql +"where Details_CD = " + obj.value ;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br />&nbsp;&nbsp;txtAmount.value = recordSet(1);<br />&nbsp;&nbsp;txtMemo.value = recordSet(2);<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br /><br />}<br /><br /><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function goodsChange(obj) {<br />&nbsp;&nbsp;//商品を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("商品を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newDetails(){<br />&nbsp;&nbsp;//明細を新規作成する関数<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;selectGoods.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function textClearDetails() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtAmount.value = "";<br />&nbsp;&nbsp;txtMemo.value = "";<br />}<br /><br /><br />function dataInsertDetails() {<br />&nbsp;&nbsp;//データを追加する関数<br /><br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckDetails(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "values(";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectSlip.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectGoods.value) + ",";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtAmount.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtMemo.value + "'";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckDetails(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (flag == 1 && selectGoods.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("GOODS_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNT" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtAmount.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("AMOUNTには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtAmount.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtMemo.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("Memo" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function goodsIndexSearch(goodsCd){<br />&nbsp;&nbsp;//商品選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD &lt;= " + goodsCd + " order by GOODS_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var goodsIndex = recordSet(0);<br />&nbsp;&nbsp;return goodsIndex;<br />}<br /></div><br /><br /><br />【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。<br /><br />★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。<br /><br />★動作確認前にテーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、<a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a>をダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。<br /><br /><br />【3】明細が表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-192.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-192-thumbnail2.gif" alt="javascript-192.gif" width="150" height="119" border="0" /></a><br /><br /><br />【4】伝票選択ボックスから伝票番号「23」を選んでください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-193.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-193-thumbnail2.gif" alt="javascript-193.gif" width="150" height="126" border="0" /></a><br /><br /><br />【5】すでに2件の明細があることを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-194.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-194-thumbnail2.gif" alt="javascript-194.gif" width="150" height="131" border="0" /></a><br /><br /><br />【6】「明細新規」をクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-195.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-195-thumbnail2.gif" alt="javascript-195.gif" width="150" height="128" border="0" /></a><br /><br /><br />【7】商品選択ボックスにフォーカスが移りました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-196.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-196-thumbnail2.gif" alt="javascript-196.gif" width="150" height="120" border="0" /></a><br /><br /><br />【8】「デジタルカメラ」を選択してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-197.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-197-thumbnail2.gif" alt="javascript-197.gif" width="150" height="122" border="0" /></a><br /><br /><br />【9】AMOUNT（数量）に「1」を入力します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-198.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-198-thumbnail2.gif" alt="javascript-198.gif" width="150" height="126" border="0" /></a><br /><br /><br />【10】MEMO（メモ）に「テスト」と入力します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-199.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-199-thumbnail2.gif" alt="javascript-199.gif" width="150" height="128" border="0" /></a><br /><br /><br />【11】「明細追加」ボタンをクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-200.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-200-thumbnail2.gif" alt="javascript-200.gif" width="150" height="132" border="0" /></a><br /><br /><br />【12】追加されましたというメッセージが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-201.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-201-thumbnail2.gif" alt="javascript-201.gif" width="150" height="114" border="0" /></a><br /><br /><br />【13】明細に追加したレコードが表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-202.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-202-thumbnail2.gif" alt="javascript-202.gif" width="150" height="132" border="0" /></a><br /><br />DETAILS_CDはオートナンバーなので自動で入力されます。SLIP_CDは伝票選択ボックスの値です。GOODS_NAME（商品名）、PRICE（単価）はテーブルT06Goodsを参照しています。<br /><br />ということでユーザーが画面から入力する必要があるのは、GOODS_CD、AMOUNT、MEMOです。<br /><br /><br />【14】追加のSQL文が正しく作成されていることを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-203.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-203-thumbnail2.gif" alt="javascript-203.gif" width="150" height="132" border="0" /></a><br /><br /><br />【15】データベースSampleDB010.mdbのテーブルT08Detailsをデータシートビューで開き、データが追加されていることを確認します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-204.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-204-thumbnail2.gif" alt="javascript-204.gif" width="121" height="150" border="0" /></a><br /><br /><br />【解説】<br /><br />（1）テーブルT08Detailsをデザインビューで見ると、DETAILS_CDのデータ型が「オートナンバー」になっています。オートナンバーはデータが追加される時、自動で連番が入力されるので、insertでDETAILS_CDを指定する必要はありません。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-206.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-206-thumbnail2.gif" alt="javascript-206.gif" width="150" height="94" border="0" /></a><br /><br />＊実はテーブルT07SlipのSLIP_CDもオートナンバーに設定していますが、伝票番号はユーザーが任意の番号でも入力できるようにしていました。<br /><br /><br />（2）テーブルT08Detailsをデータシートビューで見ると、追加の時入力が必要なのは、<br />SLIP_CD、GOODS_CD、AMOUNT、MEMOの4つです。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-205.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-205-thumbnail2.gif" alt="javascript-205.gif" width="124" height="150" border="0" /></a><br /><br />この中で重要なのはSLIP_CDです。明細は必ずある伝票に関連付けられて追加されますから、明細が表示されるときには伝票選択ボックスにSLIP_CDが入っていますのでその値を使います。ユーザーが入力する必要はありません。<br /><br />またテーブルT08DetailsにはGOODS_CDさえ保存していたら、テーブルT06Goodsを参照してGOODS_NAME（商品名）、PRICE（単価）がわかります。<br /><br /><br />（3）関数dataInsertDetails()では追加のSQL文を作成し、データ追加しています。<br /><br />今回、DETAILS_CDは入力しないので、このような時はテーブル名の後ろに追加するフィールド名をすべて書く必要があります。<br />insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) <br /><br />SLIP_CDは伝票選択ボックスから値を取得します。<br />selectSlip.value<br /><br /><br />（4）関数dataCheckDetails()では入力データをチェックしています。<br /><br />本来明細ではMEMOは未入力でもよいのですが、すべてのフィールドを入力するようにしておいたほうが初心者のうちはSQL文やデータを表示するときのプログラムが簡単になります。<br /><br />もし未入力を許可する場合は「null」という特別な値に対する処理が必要になります。<br />insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, null)<br /><br /><br />【SQL文の組み立て方】<br /><br />最終的に組み立てたいSQL文です。<br />insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')<br /><br />全体を「"」（ダブルクォーテーション）で囲みます。<br />"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')"<br /><br />値をコントロールや変数に置き換えます。<br />"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(selectSlip.value,selectGoods.value,txtAmount.value, 'txtMemo.value')"<br /><br />コントロールや変数の前後に半角空白を入れ切り離します。<br />"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values( selectSlip.value , selectGoods.value , txtAmount.value , ' txtMemo.value ')"<br /><br />コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。<br />"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" selectSlip.value "," selectGoods.value "," txtAmount.value ", '" txtMemo.value "')"<br /><br />コントロールや変数と文字列を「+」で結合します。<br />"insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')"<br /><br />変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。<br />var mySql = "insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(" + selectSlip.value + "," + selectGoods.value + "," + txtAmount.value + ", '" + txtMemo.value + "')";<br /><br /><br />上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。<br /><br />mySql = mySql + "values(";<br />mySql = mySql + Number(selectSlip.value) + ",";<br />mySql = mySql + Number(selectGoods.value) + ",";<br />mySql = mySql + Number(txtAmount.value) + ", '";<br />mySql = mySql + txtMemo.value + "'";<br />mySql = mySql +")";<br /><br />変数内では単純に改行できないので、<br />mySql ="この中では改行できない"<br /><br />mySql = mySql +"" のように前の文の後ろにプラスしていく形にします。<br />mySql += "" と書いても同様な動きをします。こちらの書き方のほうがシンプルですね。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45390104.html">
<link>https://java-script.seesaa.net/article/45390104.html</link>
<title>明細 表示</title>
<description>明細（details）は伝票（slip）のプログラムとほとんど同じ要領で作れます。この2つは見かけは違いますが、よく見るとプログラムの流れは同じです。今回は伝票選択ボックスを選択すると、明細一覧が表示されるようになっています。テーブルT08Detailsのデータを一覧で表示していますが仕組みは伝票と同じです。商品選択ボックスも顧客選択ボックスの流用です。伝票のプログラムが読めれば明細のプログラムはほとんど解説なしに読めるようになっていると思います。まずは明細を表示するところま..</description>
<dc:subject>Step46・明細 表示</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-20T17:44:57+09:00</dc:date>
<content:encoded><![CDATA[
明細（details）は伝票（slip）のプログラムとほとんど同じ要領で作れます。この2つは見かけは違いますが、よく見るとプログラムの流れは同じです。<br /><br />今回は伝票選択ボックスを選択すると、明細一覧が表示されるようになっています。テーブルT08Detailsのデータを一覧で表示していますが仕組みは伝票と同じです。商品選択ボックスも顧客選択ボックスの流用です。<br /><br />伝票のプログラムが読めれば明細のプログラムはほとんど解説なしに読めるようになっていると思います。<br /><br />まずは明細を表示するところまで作ってみましょう。<br /><br />【1】以下のように details.html、details.css、details.js を作成します。base.css、database.js はこれまでと共通です。<br /><br />details.html<br /><div class="pg"><br />&lt;html&gt;<br />&nbsp;&nbsp;&lt;head&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="database.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="details.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="base.css" rel="stylesheet" type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="details.css" rel="stylesheet" type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;details&lt;/title&gt;<br />&nbsp;&nbsp;&lt;/head&gt;<br />&nbsp;&nbsp;&lt;body&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;伝票<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id="slipDisplay"&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="" name="linkNewDetails" id="linkNewDetails"&gt;明細新規&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;form name="form2"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnInsertDetails" id="btnInsertDetails" value="明細追加"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnUpdateDetails" id="btnUpdateDetails" value="明細更新"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnDeleteDetails" id="btnDeleteDetails" value="明細削除"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GOODS_CD:&lt;span id="goodsDisplay"&gt;&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AMOUNT:&lt;input type="text" name="txtAmount" id="txtAmount"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEMO:&lt;input type="text" name="txtMemo" id="txtMemo"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="detailsDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="totalDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="sqlDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&lt;/body&gt;<br />&lt;/html&gt;<br /></div><br /><br /><br />details.css<br /><div class="pg"><br />特にありませんので、必要があれば好みでCSSをデザインしてください。<br /></div><br /><br /><br />details.js<br /><div class="pg"><br />var txtAmount;<br />var txtMemo;<br />var selectSlip;<br />var selectGoods;<br /><br />onload = init;<br />onunload = dbClose;<br /><br />function init() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtAmount = document.getElementById("txtAmount");<br />&nbsp;&nbsp;txtMemo = document.getElementById("txtMemo");<br /><br />&nbsp;&nbsp;txtAmount.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtAmount.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtMemo.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtMemo.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}<br />&nbsp;&nbsp;document.getElementById("linkNewDetails").onclick = function (){return newDetails();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;goodsDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectSlip = document.getElementById("selectSlip");<br />&nbsp;&nbsp;selectSlip.onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function detailsDisplay() {<br />&nbsp;&nbsp;//明細を表示する関数<br />&nbsp;&nbsp;var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql + "from T08Details,T06Goods ";<br />&nbsp;&nbsp;mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />&nbsp;&nbsp;mySql = mySql + "and SLIP_CD = " + selectSlip.value;<br />&nbsp;&nbsp;mySql = mySql + " order by DETAILS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select size=\"10\" name=\"selectDetails\" id=\"selectDetails\"&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml +"[DETAILS_CD]:" + recordSet(0) + " [SLIP_CD]:" + recordSet(1);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(2) + " [PRICE]:" + recordSet(3);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + " [AMOUNT]:" + recordSet(4) + " [MEMO]:" + recordSet(5);<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("detailsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function detailsChange(obj) {<br />&nbsp;&nbsp;//明細を選択した時の関数<br />&nbsp;&nbsp;var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />&nbsp;&nbsp;mySql = mySql +"from T08Details ";<br />&nbsp;&nbsp;mySql = mySql +"where Details_CD = " + obj.value ;<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br />&nbsp;&nbsp;txtAmount.value = recordSet(1);<br />&nbsp;&nbsp;txtMemo.value = recordSet(2);<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br /><br />&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br /><br />}<br /><br /><br />function goodsDisplay() {<br />&nbsp;&nbsp;//商品を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectGoods\" id=\"selectGoods\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("goodsDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectGoods = document.getElementById("selectGoods");<br />&nbsp;&nbsp;selectGoods.onchange = function (){goodsChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function goodsChange(obj) {<br />&nbsp;&nbsp;//商品を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("商品を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newDetails(){<br />&nbsp;&nbsp;//明細を新規作成する関数<br />&nbsp;&nbsp;textClearDetails();<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;goodsDisplay();<br />&nbsp;&nbsp;detailsDisplay();<br />&nbsp;&nbsp;selectGoods.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function textClearDetails() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtAmount.value = "";<br />&nbsp;&nbsp;txtMemo.value = "";<br />}<br /><br /><br />function goodsIndexSearch(goodsCd){<br />&nbsp;&nbsp;//商品選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD &lt;= " + goodsCd + " order by GOODS_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var goodsIndex = recordSet(0);<br />&nbsp;&nbsp;return goodsIndex;<br />}<br /></div><br /><br /><br />【2】保存したら details.html をダブルクリックしてWebブラウザで開きます。<br />★details.html、base.css、details.css、database.js、details.js は必ず同じフォルダ内に置いてください。<br /><br /><br />【3】明細が表示されました。<br /><a href="http://java-script.up.seesaa.net/image/javascript-183.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-183-thumbnail2.gif" alt="javascript-183.gif" width="150" height="110" border="0" /></a><br /><br /><br />【4】伝票選択ボックスと商品選択ボックスはプログラムで表示しています。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-185.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-185-thumbnail2.gif" alt="javascript-185.gif" width="150" height="120" border="0" /></a><br /><br /><br />【5】伝票選択ボックスから伝票番号「10」を選択します。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-184.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-184-thumbnail2.gif" alt="javascript-184.gif" width="150" height="127" border="0" /></a><br /><br /><br />【6】明細が表示されました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-186.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-186-thumbnail2.gif" alt="javascript-186.gif" width="150" height="133" border="0" /></a><br /><br />＊ゴチャゴチャして見難いかもしれませんが、DETAILS_CDとSLIP_CDの変化をつかんでほしいためです。これらは最終的に表示しないようにします。<br /><br /><br />【7】伝票番号「10」の明細だけが表示されているところが重要です。伝票選択ボックスで選択した伝票番号と同じだということを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-191.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-191-thumbnail2.gif" alt="javascript-191.gif" width="150" height="118" border="0" /></a><br /><br /><br />【8】明細のレコードを選択すると、そのデータが上の選択ボックスやテキストボックスに反映されます。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-187.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-187-thumbnail2.gif" alt="javascript-187.gif" width="150" height="129" border="0" /></a><br /><br /><br />【9】「明細新規」をクリックします。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-188.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-188-thumbnail2.gif" alt="javascript-188.gif" width="150" height="129" border="0" /></a><br /><br /><br />【10】テキストボックスはクリアされ、商品選択ボックスにフォーカスが移りました。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-189.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-189-thumbnail2.gif" alt="javascript-189.gif" width="150" height="115" border="0" /></a><br /><br /><br />【11】商品選択ボックスで商品を選べます。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-190.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-190-thumbnail2.gif" alt="javascript-190.gif" width="150" height="117" border="0" /></a><br /><br /><br />【12】伝票選択ボックスや明細をいろいろ切り替えて動作を確認してください。<br /><br /><br />【解説】<br /><br />(1)関数slipDisplay()は伝票の時とまったく同じです。<br /><br /><br />(2)関数slipChange()は伝票選択ボックスをチェンジした時に、関数detailsDisplay()を呼び出しています。<br /><br /><br />(3)関数detailsDisplay()は明細を表示しています。テーブルT08DetailsにはGOODS_CDしかなく、商品に関する情報GOODS_NAME、PRICE、MEMOがわからないので、テーブルT06Goodsも一緒に使います。<br /><br />var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";<br />mySql = mySql + "from T08Details,T06Goods ";<br />mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";<br />mySql = mySql + "and SLIP_CD = " + selectSlip.value;<br />mySql = mySql + " order by DETAILS_CD";<br /><br />＊SLIP_CDの抽出条件にselectSlip.valueを使うことで、目的の伝票の明細だけが取り出せる仕組みです。<br /><br />またこの関数ではイベントハンドラの設定も行っています。<br />document.getElementById("selectDetails").onchange = function (){detailsChange(this);}<br /><br /><br />(4)関数detailsChange()は明細をクリックした時に、商品選択ボックスやテキストボックスに1レコード分のデータを表示しています。<br /><br />var mySql = "select GOODS_CD,AMOUNT,MEMO ";<br />mySql = mySql +"from T08Details ";<br />mySql = mySql +"where Details_CD = " + obj.value ;<br /><br />関数goodsIndexSearch()で商品選択ボックスを切り替えています。<br />selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));<br /><br /><br />(5)関数goodsDisplay()は商品選択ボックスの表示と、イベントハンドラの設定を行っています。<br /><br /><br />(6)関数goodsChange()は商品選択ボックスがチェンジしたときに呼び出されます。<br /><br /><br />(7)関数newDetails()は「明細新規」をクリックした時に呼び出されます。<br /><br /><br />(8)関数textClearDetails()は明細のテキストボックスをクリアします。<br /><br /><br />(9)関数goodsIndexSearch()はGOODS_CDから何番目の商品を選択状態にするかIndexを返します。伝票の顧客の時と同じ仕組みです。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45380346.html">
<link>https://java-script.seesaa.net/article/45380346.html</link>
<title>データベースの修正</title>
<description>テーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、「MEMO」に修正が必要です。またフィールド名を変更したことで、Accessのフォームも修正しましたので、SampleDB010.zipをダウンロードし直してください。すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。【解説】Accessでフィールド名に「NOTE」を使う場合は、SQL文の中で[]カッコで囲まないとエラーになります。insert into..</description>
<dc:subject>Step45・データベースの修正</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-20T15:47:00+09:00</dc:date>
<content:encoded><![CDATA[
テーブルT08Detailsにある最後のフィールド名が「NOTE」になっている場合は、「MEMO」に修正が必要です。<br /><br /><img src="http://java-script.up.seesaa.net/image/javascript-182.gif" alt="javascript-182.gif" width="332" height="147" border="0" /><br /><br />またフィールド名を変更したことで、Accessのフォームも修正しましたので、<a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a>をダウンロードし直してください。<br /><br />すでに「MEMO」になっている場合は修正後のデータベースなので、そのままでかまいません。<br /><br />【解説】<br />Accessでフィールド名に「NOTE」を使う場合は、SQL文の中で[]カッコで囲まないとエラーになります。<br />insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,[NOTE]) values(23,10,1, 'テスト')<br /><br />「MEMO」だとそのまま使えます。<br />insert into T08Details(SLIP_CD,GOODS_CD,AMOUNT,MEMO) values(23,10,1, 'テスト')<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
<item rdf:about="https://java-script.seesaa.net/article/45293048.html">
<link>https://java-script.seesaa.net/article/45293048.html</link>
<title>販売伝票 改良</title>
<description>販売伝票は「伝票」と「明細」で構成されます。前回までに作ったのは伝票にあたる部分です。（販売伝票の上部）次回から明細を作成しますが、その前に伝票に明細を組み込みやすくするため、画面とプログラムを改良します。伝票と明細は似たようなプログラムで動くので、フォーム上の部品や関数名に、伝票には「Slip」、明細には「Details」と付けることで区別します。【1】以下のように slip.htmlとslip.js を更新します。slip.css、base.css、database.js..</description>
<dc:subject>Step44・販売伝票 改良</dc:subject>
<dc:creator>JavaScript入門</dc:creator>
<dc:date>2007-06-19T15:47:07+09:00</dc:date>
<content:encoded><![CDATA[
販売伝票は「伝票」と「明細」で構成されます。前回までに作ったのは伝票にあたる部分です。（販売伝票の上部）<br /><br />次回から明細を作成しますが、その前に伝票に明細を組み込みやすくするため、画面とプログラムを改良します。<br /><br />伝票と明細は似たようなプログラムで動くので、フォーム上の部品や関数名に、伝票には「Slip」、明細には「Details」と付けることで区別します。<br /><br />【1】以下のように slip.htmlとslip.js を更新します。slip.css、base.css、database.js は前回までと同じです。<br /><br />slip.html<br /><div class="pg"><br />&lt;html&gt;<br />&nbsp;&nbsp;&lt;head&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="database.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="slip.js"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="base.css" rel="stylesheet" type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="slip.css" rel="stylesheet" type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;slip&lt;/title&gt;<br />&nbsp;&nbsp;&lt;/head&gt;<br />&nbsp;&nbsp;&lt;body&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;販売伝票<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id="slipDisplay"&gt;&lt;/span&gt;&lt;a href="" name="linkNewSlip" id="linkNewSlip"&gt;伝票新規&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;form name="form1"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnInsertSlip" id="btnInsertSlip" value="伝票追加"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnUpdateSlip" id="btnUpdateSlip" value="伝票更新"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" name="btnDeleteSlip" id="btnDeleteSlip" value="伝票削除"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SLIP_CD:&lt;input type="text" name="txtSlipCd" id="txtSlipCd"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SLIP_DATE:&lt;input type="text" name="txtSlipDate" id="txtSlipDate"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CST_CD:&lt;span id="customerDisplay"&gt;&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id="addressDisplay"&gt;&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="sqlDisplay"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&lt;/body&gt;<br />&lt;/html&gt;<br /></div><br /><br /><br />slip.js<br /><div class="pg"><br />var txtSlipCd;<br />var txtSlipDate;<br />var selectCst;<br /><br />onload = init;<br />onunload = dbClose;<br /><br />function init() {<br />&nbsp;&nbsp;//初期設定をする関数<br />&nbsp;&nbsp;txtSlipCd = document.getElementById("txtSlipCd");<br />&nbsp;&nbsp;txtSlipDate = document.getElementById("txtSlipDate");<br /><br />&nbsp;&nbsp;txtSlipCd.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtSlipCd.onblur = function (){blur(this);}<br />&nbsp;&nbsp;txtSlipDate.onfocus = function (){focus(this);}<br />&nbsp;&nbsp;txtSlipDate.onblur = function (){blur(this);}<br /><br />&nbsp;&nbsp;document.getElementById("btnInsertSlip").onclick = function (){dataInsertSlip();}<br />&nbsp;&nbsp;document.getElementById("btnUpdateSlip").onclick = function (){dataUpdateSlip();}<br />&nbsp;&nbsp;document.getElementById("btnDeleteSlip").onclick = function (){dataDeleteSlip();}<br />&nbsp;&nbsp;document.getElementById("linkNewSlip").onclick = function (){return newSlip();}<br /><br />&nbsp;&nbsp;dbConnect();<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;cstDisplay();<br />}<br /><br /><br />function focus(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffff00";<br />}<br /><br /><br />function blur(obj){<br />&nbsp;&nbsp;obj.style.backgroundColor = "#ffffff";<br />}<br /><br /><br />function slipDisplay() {<br />&nbsp;&nbsp;//伝票を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectSlip\" id=\"selectSlip\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("slipDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;document.getElementById("selectSlip").onchange = function (){slipChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function slipChange(obj) {<br />&nbsp;&nbsp;//伝票を選択した時の関数<br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("伝票を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"from T07Slip,T04Customer ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +"and SLIP_CD = " + obj.value ;<br />&nbsp;&nbsp;&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipCd.value = recordSet(0);<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipDate.value = dateFormat(recordSet(1));<br />&nbsp;&nbsp;&nbsp;&nbsp;selectCst.selectedIndex = cstIndexSearch(recordSet(2));<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet = null;<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function cstDisplay() {<br />&nbsp;&nbsp;//顧客を表示する関数<br /><br />&nbsp;&nbsp;var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br /><br />&nbsp;&nbsp;document.getElementById("customerDisplay").innerHTML = "";<br /><br />&nbsp;&nbsp;var tempHtml = "&lt;select name=\"selectCst\" id=\"selectCst\"&gt;\n";<br />&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"0\"&gt;選択してください。&lt;/option&gt;\n";<br />&nbsp;&nbsp;while (!recordSet.EOF){<br />&nbsp;&nbsp;&nbsp;&nbsp;tempHtml = tempHtml + "\t&lt;option value=\"" + recordSet(0) + "\"&gt;" + recordSet(1) + "&lt;/option&gt;\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.MoveNext();<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;tempHtml = tempHtml + "&lt;/select&gt;";<br /><br />&nbsp;&nbsp;//alert(tempHtml);<br />&nbsp;&nbsp;document.getElementById("customerDisplay").innerHTML = tempHtml;<br />&nbsp;&nbsp;selectCst = document.getElementById("selectCst");<br />&nbsp;&nbsp;selectCst.onchange = function (){cstChange(this);}<br /><br />&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;recordSet = null;<br />}<br /><br /><br />function cstChange(obj) {<br />&nbsp;&nbsp;//顧客を選択した時の関数<br /><br />&nbsp;&nbsp;if(obj.selectedIndex==0){<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("顧客を選択してください。");<br />&nbsp;&nbsp;}else{<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;<br />&nbsp;&nbsp;&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet.Close();<br />&nbsp;&nbsp;&nbsp;&nbsp;recordSet = null;<br />&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br />&nbsp;&nbsp;}<br /><br />}<br /><br /><br />function sqlDisplay(_mySql) {<br />&nbsp;&nbsp;//SQLを表示する関数<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "&lt;p&gt;" + _mySql + "&lt;/p&gt;";<br />}<br /><br /><br />function newSlip(){<br />&nbsp;&nbsp;//伝票を新規作成する関数<br />&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;document.getElementById("sqlDisplay").innerHTML = "";<br />&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;txtSlipCd.value = maxCdSlip() + 1;<br />&nbsp;&nbsp;txtSlipDate.focus();<br />&nbsp;&nbsp;return false;<br />}<br /><br /><br />function maxCdSlip(){<br />&nbsp;&nbsp;//SLIP_CDの最大値を取得する関数<br />&nbsp;&nbsp;var mySql = "select max(SLIP_CD) from T07Slip";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var maxCd = recordSet(0);<br />&nbsp;&nbsp;return maxCd;<br />}<br /><br /><br />function textClearSlip() {<br />&nbsp;&nbsp;//テキストボックスをクリアする関数<br />&nbsp;&nbsp;txtSlipCd.value = "";<br />&nbsp;&nbsp;txtSlipDate.value = "";<br />}<br /><br /><br />function dataInsertSlip() {<br />&nbsp;&nbsp;//データを追加する関数<br />&nbsp;&nbsp;try{<br />&nbsp;&nbsp;&nbsp;&nbsp;if(dataCheckSlip(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "insert into T07Slip values(" ;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(txtSlipCd.value) + ", '";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + txtSlipDate.value + "', ";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + Number(selectCst.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql +")";<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("追加しました。");<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;}catch(error){<br />&nbsp;&nbsp;&nbsp;&nbsp;alert(error.number + "\n" + error.description);<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataUpdateSlip() {<br />&nbsp;&nbsp;//データを更新する関数<br />&nbsp;&nbsp;if(dataCheckSlip(1)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "update T07Slip set ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + "CST_CD = " + Number(selectCst.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("更新しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataDeleteSlip() {<br />&nbsp;&nbsp;//データを削除する関数<br />&nbsp;&nbsp;if(!confirm("本当に削除しますか？")){<br />&nbsp;&nbsp;&nbsp;&nbsp;return ;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;if(dataCheckSlip(0)){<br />&nbsp;&nbsp;&nbsp;&nbsp;var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);<br />&nbsp;&nbsp;&nbsp;&nbsp;sqlDisplay(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;database.Execute(mySql);<br />&nbsp;&nbsp;&nbsp;&nbsp;textClearSlip();<br />&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("addressDisplay").innerHTML = "";<br />&nbsp;&nbsp;&nbsp;&nbsp;slipDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;cstDisplay();<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("削除しました。");<br />&nbsp;&nbsp;}<br />}<br /><br /><br />function dataCheckSlip(flag){<br />&nbsp;&nbsp;//データをチェックする関数<br />&nbsp;&nbsp;var tempStr = "は必ず入力してください。";<br /><br />&nbsp;&nbsp;if (txtSlipCd.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_CD" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (txtSlipCd.value.match(/[^0-9]/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_CDには半角数字を入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;txtSlipCd.focus();<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && txtSlipDate.value == "") {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_DATE" + tempStr);<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && !txtSlipDate.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("SLIP_DATEは「yyyy/mm/dd」形式で入力してください！");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;if (flag == 1 && selectCst.value == 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;alert("CST_CD" + "は必ず選択してください。");<br />&nbsp;&nbsp;&nbsp;&nbsp;return false;<br />&nbsp;&nbsp;}<br /><br />&nbsp;&nbsp;return true;<br />}<br /><br /><br />function cstIndexSearch(cstCd){<br />&nbsp;&nbsp;//顧客選択ボックスのIndexを検索する関数<br />&nbsp;&nbsp;var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD &lt;= " + cstCd + " order by CST_CD)";<br />&nbsp;&nbsp;var recordSet = database.Execute(mySql);<br />&nbsp;&nbsp;var cstIndex = recordSet(0);<br />&nbsp;&nbsp;return cstIndex;<br />}<br /></div><br /><br /><br />【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。<br />★slip.html、base.css、slip.css、database.js、slip.js は必ず同じフォルダ内に置いてください。<br /><br /><br />【3】前回までと動きは変わらないことを確認してください。<br /><br /><a href="http://java-script.up.seesaa.net/image/javascript-181.gif" target="_blank"><img src="http://java-script.up.seesaa.net/image/javascript-181-thumbnail2.gif" alt="javascript-181.gif" width="150" height="113" border="0" /></a><br /><br />＊「最大値」が「伝票新規」に変わりましたが働きは同じです。<br /><br /><br />【解説】<br /><br />(1)大きな変更点はフォーム上の部品や関数名に「Slip」を付けたことです。<br />・html側<br />btnInsert　→　btnInsertSlip<br />btnUpdate　→　btnUpdateSlip<br />btnDelete　→　btnDeleteSlip<br />linkMaxCd　→　linkNewSlip<br /><br />・JavaScript側<br />maxCd()　→　newSlip()とmaxCdSlip()に分離<br />textClear()　→　textClearSlip()<br />dataInsert()　→　textClearSlip()<br />dataUpdate()　→　dataUpdateSlip()<br />dataDelete()　→　dataDeleteSlip()<br />dataCheck()　→　dataCheckSlip()<br /><br /><br />(2)「最大値」を「伝票新規」に変えたことで関数も2つに分離しました。前回までの関数maxCd()はnewSlip()にあたり、この関数からmaxCdSlip()を呼び出して最大値を取得しています。分離したことでそれぞれの関数がシンプルになり、maxCdSlip()は他の用途にも使いやすくなりました。<br /><br />function newSlip(){<br />省略<br />&nbsp;&nbsp;txtSlipCd.value = maxCdSlip() + 1;<br />省略<br />}<br /><br />function maxCdSlip(){<br />省略<br />&nbsp;&nbsp;return maxCd;<br />}<br /><br /><br />(3)「div」を「span」に変更しました。&lt;span&gt; や &lt;div&gt; は特に意味を持たないタグです。タグで囲んだ部分にスタイルシートを適用したりするのに使われます。&lt;span&gt; はインライン要素で前後に改行は入りません。&lt;div&gt; はブロック要素で前後に改行が入ります。今回は配置するときに改行が邪魔だったので、&lt;span&gt; を使いました。<br /><br />&lt;div id="slipDisplay"&gt;&lt;/div&gt;<br />↓<br />&lt;span id="slipDisplay"&gt;&lt;/span&gt;<br /><br />&lt;div id="customerDisplay"&gt;&lt;/div&gt;<br />↓<br />&lt;span id="customerDisplay"&gt;&lt;/span&gt;<br /><br /><br />(4)sqlDisplayを下に配置しました。sqlDisplayはSQL文や選択ボックスの情報を表示するときに使っていますが、システムが完成して不要になったら、関数sqlDisplay()を呼び出している部分をコメントにすると表示されなくなります。<br /><br />例<br />//sqlDisplay(mySql);<br />//sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);<br /><br /><br />【伝票のダウンロード】<br />今回までの改良を含むSlipです。<br />database.jsとbase.cssは他のマスターと共通です。<br /><a href="http://java-script.up.seesaa.net/web/slip1.zip" alt="slip1.zip" target="_blank">slip1.zip</a><br /><br />データベースをまだ入手していない方は一緒にダウンロードしてください。<br /><a href="http://java-script.up.seesaa.net/web/SampleDB010.zip" alt="SampleDB010.zip" target="_blank">SampleDB010.zip</a><br />データベース「SampleDB010.mdb」はCドライブの直下に保存します。<br /><br /><br /><a name="more"></a>

]]><![CDATA[
]]></content:encoded>
</item>
</rdf:RDF>

