function showOrgLists(targetBox) {
        var e = document.getElementById(targetBox);
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM ORGANIZATION", [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
			  var option = document.createElement("option");
				option.text = item['org_name'];
				option.value = item['org_id'];
			  e.appendChild(option);
            }
          });
        });
      }
      function showSearchInstByOrg(dtext,dvalue) {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>ชื่อ-นามสกุล</th><th>โทรศัพท์</th><th>อีเมล์</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลวิทยากร " + dtext;
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM INSTRUCTOR LEFT JOIN ORGANIZATION ON INSTRUCTOR.org_id=ORGANIZATION.org_id WHERE INSTRUCTOR.org_id="+dvalue+" ORDER BY INSTRUCTOR.inst_name;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['inst_name']+'</td><td>'+item['inst_phone']+'</td><td>'+
				  item['inst_email'] + '</td></tr>';
            }
          });
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error1'><img src='image1.gif' onerror='document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error1&#39).innerHTML=&#39;&#39;'></div></tr>";
        });
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showSearchInstBySubject(dtext) {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>หลักสูตร/โครงการ/สาขา</th><th>หน่วยงาน</th><th>ชื่อ-นามสกุล</th><th>โทรศัพท์</th><th>อีเมล์</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลวิทยากร";
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM ((INSTSUBJECT LEFT JOIN INSTRUCTOR ON INSTSUBJECT.inst_id=INSTRUCTOR.inst_id ) LEFT JOIN SUBJECT ON INSTSUBJECT.sub_id=SUBJECT.sub_id) LEFT JOIN ORGANIZATION ON INSTRUCTOR.org_id=ORGANIZATION.org_id WHERE SUBJECT.sub_name like '%"+dtext+"%' ORDER BY SUBJECT.sub_name,ORGANIZATION.org_name;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['sub_name']+'</td><td>'+item['org_name']+'</td><td>'+item['inst_name']+'</td><td>'+item['inst_phone']+'</td><td>'+
				  item['inst_email'] + '</td></tr>';
            }
          });
			//document.getElementById('DataList').innerHTML += sql_str;
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error2'><img src='image2.gif' onerror='alert();document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error2&#39).innerHTML=&#39;&#39;'></div></tr>";
        });
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showSearchInstByName(dtext) {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>หลักสูตร/โครงการ/สาขา</th><th>หน่วยงาน</th><th>ชื่อ-นามสกุล</th><th>โทรศัพท์</th><th>อีเมล์</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลวิทยากร";
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM ((INSTSUBJECT LEFT JOIN INSTRUCTOR ON INSTSUBJECT.inst_id=INSTRUCTOR.inst_id ) LEFT JOIN SUBJECT ON INSTSUBJECT.sub_id=SUBJECT.sub_id) LEFT JOIN ORGANIZATION ON INSTRUCTOR.org_id=ORGANIZATION.org_id WHERE INSTRUCTOR.inst_name like '%"+dtext+"%' ORDER BY INSTRUCTOR.inst_name,SUBJECT.sub_name,ORGANIZATION.org_name;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['inst_name']+'</td><td>'+item['org_name']+'</td><td>'+item['sub_name']+'</td><td>'+item['inst_phone']+'</td><td>'+
				  item['inst_email'] + '</td></tr>';
            }
          });
			//document.getElementById('DataList').innerHTML += sql_str;
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error3'><img src='image3.gif' onerror='document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error3&#39).innerHTML=&#39;&#39;'></div></tr>";
        });
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showSearchPlaceByOrg(dtext,dvalue) {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>ชื่อสถานที่/ห้อง</th><th>การให้บริการ</th><th>อุปกรณ์/เครื่องมือ</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลสถานที่ฝีกอบรม/สัมมนา " + dtext;
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM PLACE LEFT JOIN ORGANIZATION ON PLACE.org_id=ORGANIZATION.org_id WHERE PLACE.org_id="+dvalue+" ORDER BY PLACE.place_name,PLACE.place_detail,PLACE.place_equipment;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['place_name']+'</td><td>'+item['place_detail']+'</td><td>'+
				  item['place_equipment'] + '</td></tr>';
            }
          });
 			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error4'><img src='image4.gif' onerror='document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error4&#39).innerHTML=&#39;&#39;'></div></tr>";
       });
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showSearchPlaceByName(dtext) {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>ชื่อสถานที่/ห้อง</th><th>หน่วยงาน</th><th>การให้บริการ</th><th>อุปกรณ์/เครื่องมือ</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลสถานที่ฝึกอบรม/สัมมนา";
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM PLACE LEFT JOIN ORGANIZATION ON PLACE.org_id=ORGANIZATION.org_id WHERE PLACE.place_name like '%"+dtext+"%' ORDER BY PLACE.place_name,ORGANIZATION.org_name,PLACE.place_detail,PLACE.place_equipment;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['place_name']+'</td><td>'+item['org_name']+'</td><td>'+item['place_detail']+'</td><td>'+
				  item['place_equipment'] + '</td></tr>';
            }
          });
			//document.getElementById('DataList').innerHTML += sql_str;
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error5'><img src='image5.gif' onerror='document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error5&#39).innerHTML=&#39;&#39;'></div></tr>";
        });
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showInst() {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>ชื่อ-นามสกุล</th><th>โทรศัพท์</th><th>อีเมล์</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลวิทยากร ";
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM INSTRUCTOR ORDER BY INSTRUCTOR.inst_name;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['inst_name']+'</td><td>'+item['inst_phone']+'</td><td>'+item['inst_email'] + '</td></tr>';
            }
          }); 
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error1'><img src='image1.gif' onerror='document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error1&#39).innerHTML=&#39;&#39;'></div></tr>";
        });
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showSub() {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>หลักสูตร/โครงการ/สาขา</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลหลักสูตร";
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM SUBJECT ORDER BY SUBJECT.sub_name;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += '<tr><td>'+(i+1)+'</td><td>'+item['sub_name']+'</td></tr>';
            }
          });
			//document.getElementById('DataList').innerHTML += sql_str;
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error2'><img src='image2.gif' onerror='alert();document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error2&#39).innerHTML=&#39;&#39;'></div></tr>";
        }); 
		document.getElementById('ShowResult').style.display = 'block';
      }
      function showOrg() {
        document.getElementById('DataList').innerHTML = '<tr><th>ลำดับที่</th><th>ชื่อหน่วยงาน</th><th>ที่อยู่</th></tr>';
        document.getElementById('ResultTitleBar').innerHTML = "&nbsp;&nbsp;รายการข้อมูลหน่วยงาน ";
        db.transaction(function(tx) {
		  var sql_str = "SELECT * FROM ORGANIZATION ORDER BY ORGANIZATION.org_name;";
          tx.executeSql(sql_str, [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('DataList').innerHTML += 
                  '<tr><td>'+(i+1)+'</td><td>'+item['org_name']+'</td><td>'+item['org_address']+'</td></tr>';
            }
          });
			//document.getElementById('DataList').innerHTML += "<tr><div id='img_error1'><img src='image1.gif' onerror='document.getElementById(&#39;dat_loading&#39;).style.display = &#39;none&#39; ; document.getElementById(&#39img_error1&#39).innerHTML=&#39;&#39;'></div></tr>";
        });
		document.getElementById('ShowResult').style.display = 'block';
      }
	</script>
  <link id="avast_os_ext_custom_font" href="chrome-extension://eofcbnmajmjmplflapaojjnihcjkigck/common/ui/fonts/fonts.css" rel="stylesheet" type="text/css"></head>
  <body onload="createTable();showOrgLists(&#39;inst_org_id&#39;);showOrgLists(&#39;place_org_id&#39;)">
	<section class="MainBox"><center><h3 id="dsd_office">ฐานข้อมูลเพื่อการฝึกอบรมจังหวัดลำปาง</h3></center>
		<article class="SearchBox">
			<div class="TitleBar">&nbsp;&nbsp;ข้อมูลวิทยากร</div>
			<div class="ContentBox">
			  <div class="RowGroup">
				หน่วยงาน 
				<select id="inst_org_id">
				</select>
				<button id="inst_org_show" onclick="showSearchInstByOrg(document.getElementById(&#39;inst_org_id&#39;).options[document.getElementById(&#39;inst_org_id&#39;).selectedIndex].text,document.getElementById(&#39;inst_org_id&#39;).value);">แสดง</button>
			  </div>
			  <div class="RowGroup">
				สาขา 
				<input type="text" id="inst_subject_search" width="150px">
				<button id="inst_subject_show" onclick="if(document.getElementById('inst_subject_search').value==''){alert('กรุณากรอกข้อความที่ต้องการค้นหา'); document.getElementById('inst_subject_search').focus();}else {showSearchInstBySubject(document.getElementById(&#39;inst_subject_search&#39;).value);}">ค้นหา</button>
			  </div>
			  <div class="RowGroup">
				ชื่อ-นามสกุล
				<input type="text" id="inst_name_search" width="150px">
				<button id="inst_name_search" onclick="if(document.getElementById('inst_name_search').value==''){alert('กรุณากรอกข้อความที่ต้องการค้นหา'); document.getElementById('inst_name_search').focus();} else {showSearchInstByName(document.getElementById(&#39;inst_name_search&#39;).value);}">ค้นหา</button>
			  </div>
			</div>
		</article>
		<article class="SearchBox">
			<div class="TitleBar">&nbsp;&nbsp;ข้อมูลสถานที่ฝึกอบรม/สัมมนา</div>
			<div class="ContentBox">
			  <div class="RowGroup">
				หน่วยงาน 
				<select id="place_org_id" onload="showOrgLists(&#39;place_org_id&#39;)">
				</select>
				<button id="place_org_show" onclick="showSearchPlaceByOrg(document.getElementById(&#39;inst_org_id&#39;).options[document.getElementById(&#39;place_org_id&#39;).selectedIndex].text,document.getElementById(&#39;place_org_id&#39;).value);">แสดง</button>
			  </div>
			  <div class="RowGroup">
				คำค้น
				<input type="text" id="place_name_search" width="150px">
				<button id="place_name_show" onclick="if(document.getElementById('place_name_search').value==''){alert('กรุณากรอกข้อความที่ต้องการค้นหา'); document.getElementById('place_name_search').focus();} else {showSearchPlaceByName(document.getElementById(&#39;place_name_search&#39;).value);}">ค้นหา</button>
			  </div>
			</div>
		</article>
		<article class="SearchBox">
			<div class="TitleBar">&nbsp;&nbsp;ข้อมูลพื้นฐาน</div>
			<div class="ContentBox">
			  <div class="RowGroup">
				1.ข้อมูลหน่วยงาน	<button id="org_show" onclick="showOrg();">แสดงข้อมูล</button>
			  </div>
			  <div class="RowGroup">
				2.ข้อมูลหลักสูตร	<button id="sub_show" onclick="showSub();">แสดงข้อมูล</button>
			  </div>
			  <div class="RowGroup">
				3.ข้อมูลวิทยากร	<button id="inst_show" onclick="showInst();">แสดงข้อมูล</button>
			  </div>
			</div>
		</article>
	</section>
	<section>
	<center><u>หมายเหตุ</u>  1.ต้องเปิดด้วยโปรแกรม Chrome, Opera, Edge&copy;2020 หรือ Safari เท่านั้น <br/>2.ใช้เครื่องหมาย % เพื่อแสดงข้อมูลทั้งหมด</center>
	</section>
	<section class="SearchResult" id="ShowResult">
		<div class="ResultTitleBar" id="ResultTitleBar">&nbsp;&nbsp;รายการข้อมูล</div>
		<div class="ResultList" id="ShowList">
			<div id="DataListTitle">&nbsp;</div>
			<table id="DataList">
			</table>
		</div>
		<div class="ResultTitleBar"><button id="CloseShowResult" onclick="document.getElementById(&#39;ShowResult&#39;).style.display = &#39;none&#39;;">ปิด</button></div>
	</section>
	<!-- <div class="loader" id="dat_loading"></div> -->
 </body></html>