VBAからGDI+を使う資料集
inet上の達人の方々から御教示いただいたコードを少しアレンジさせてもらっています（切り貼りとも言います）。
  1. ホーム
  2. Other
  3. leanhta


JavaScriptの勉強にhtaを作ってみた

勉強のためには何か動くモノ（出来れば使えるモノ）を作ってみるという主義なので、Accessのデータ操作を中心にあれこれやっています。
JavaScriptについては初めの一歩の段階ですが、Webページの構造については少し分かって来た気がします。
CSSを使って画面を構成し、JavaScriptでコーディングするのは、UserFormを作成し、Eventに対する動作をコーディングするのに似ているような。
  1. mdbに接続し、Accessのフォームを模擬してみる
  2. クリップボードの値（テキスト）を読み書きする習作
  3. エクセルの様に編集可能な表を作成してみる
  4. CSSでメニューバーを模擬
  5. ファイル選択ダイアログを自作してみる
  6. accdbに接続してみる


htaでmdbを操作してみました。
Access2003まで存在したデータアクセスページの代わりですな。センスのなさに落ち込みながら、CSSで外観にもこだわってみました。
htmlのbodyの中味は敢えて空にして、全てJavaScriptでページを生成してみました。
Access2010のフォームを再現してみました。IE8も考慮して、四角いボタンで我慢しています。「帳票フォーム」の詳細セクションをクリックすると
詳細フォームが表示されるのを模擬しています。
☆　メインフォーム
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<link rel="stylesheet" href="tablestyle.css" type="text/css"/>
<title>mdbの表示</title>
<script type="text/javascript">

//gloval variable
var gConnection = null;
var rs = null;
var rs2 = null;

window.onload = function(){
  openfirstquery();
}

 // select要素作成
function makeselect(myform,id){
  //var item = new Array('ID','data','link');
  select = document.createElement("select");
  select.id=id;
  for( i=0; i<rs.fields.count; i++ ){
    // option要素作成
    var option = document.createElement("option");
    //option.value = item[i];
    option.value = rs.fields(i).name;
    var text = document.createTextNode(rs.fields(i).name);
    option.appendChild(text);
    select.appendChild(option);
  }
  myform.appendChild(select);
}

//Sorting
function sort(){
	//rs をSortingして、tableの中味を入れ替える
	var tbody = document.getElementsByTagName('tbody')[0];
	var selectvalue = document.getElementById('select1').value;
	rs.sort = selectvalue + " DESC";
	
	//j = 0;から始めると、見出し行から書き換えてしまう！
	var j = 1;
	while(!rs.eof){
		for(var i=0; i<3; i++){
			if(String(rs.fields(i).value).slice(0,4) == 'http'){
				var myCell = tbody.rows[j].cells[i];
				myCell.innerHTML=  '<a href="'+rs.fields(i).value+'">'+rs.fields(i).value+'</a>';
			}
			else
				tbody.rows[j].cells[i].innerHTML=rs.fields(i).value;
		}
		rs.movenext;
		j++;
	}

}

//名前はFilterだが、全データを対象にクエリを実行している
function filter(){
	var body = document.getElementsByTagName('body')[0];
	var table = document.getElementsByTagName('table')[0];
	
	var fieldname = document.getElementById('select1').value;
	var criteria = document.getElementById('text1').value;
	var selectno = document.getElementById('select1').selectedIndex
	var sqlsheed = "SELECT table1.連番, table1.[タイトル], t_大分類.大分類, table1.概要 FROM table1 LEFT JOIN t_大分類 ON table1.[大分類コード] = t_大分類.[大分類コード] ";
	
	//空文字列判定
	if(criteria){
		//rs.Filter = "ID = '2'";
		//数値か否かの分岐 adInteger = 3, adVarWchar = 202 他
		//日付型等も考えられるが非実装
		if(rs.fields(selectno).type == 3)
			var sql =sqlsheed + "WHERE table1." + fieldname + " = " + criteria + ";";
		//ORDER BY table1.連番;
		else{
			//Filterのワイルドカードは*で良いが、SQLは%に変更する必要があるので留意
			var sql =sqlsheed + "WHERE table1." + fieldname + " LIKE '%" + criteria + "%';";
			//alert(sql);
			}
		rs = null;
		rs = new ActiveXObject("ADODB.Recordset");
		rs.ActiveConnection = gConnection;
		rs.CursorLocation = 3; //adUseClient
		//rs.CursorType = 0; //adOpenForwardOnly - default
		//rs.LockType = 1; //adLockReadOnly - default
		rs.Open(sql);
		//alert(rs.recordcount);
	}
	//空文字
	else{
		return false;
	}

	body.removeChild(table);
	maketable(body);
}

//Filter -> テーブル全体からの抽出に方向転換　没
function filter_original(){
	var body = document.getElementsByTagName('body')[0];
	var table = document.getElementsByTagName('table')[0];
	
	var fieldname = document.getElementById('select1').value;
	var criteria = document.getElementById('text1').value;
	var selectno = document.getElementById('select1').selectedIndex
	//空文字列判定
	if(criteria){
		//rs.Filter = "ID = '2'";
		//数値か否かの分岐 adInteger = 3, adVarWchar = 202 他
		//日付型等も考えられるが非実装
		if(rs.fields(selectno).type == 3)
			var filterstring =fieldname + " = " + criteria;
		else
			var filterstring =fieldname + " like '*" + criteria + "*'";
		rs.Filter = filterstring;
	}
	//空文字
	else{
		rs.Filter = 0; //adFilterNone
	}

	body.removeChild(table);
	maketable(body);
}

//tableを生成
function maketable(myParent){
	var table = document.createElement( 'table' );
	
	if(myParent.childNodes.length>1)
		myParent.insertBefore(table, myParent.childNodes(1));
	else
		myParent.appendChild(table);
	
	var tbody = document.createElement('tbody');
	table.appendChild(tbody);
	var trhead = document.createElement('tr');
	tbody.appendChild(trhead);
	for(var i=0; i<rs.fields.count; i++){
		var th = document.createElement('th');
		trhead.appendChild(th);
		th.innerHTML = rs.fields(i).name;
	}
	var j = 0;
	while(!rs.eof){
		var row = tbody.insertRow( tbody.rows.length );
		for(var i=0; i<rs.fields.count; i++){
			var td=row.insertCell(row.cells.length);
			//全セルにクリックイベントを付与する
			//var mycell=tbody.rows[j].cells[i];
			//mycell.onclick =function(){cellclick(this);}
			td.onclick =function(){cellclick(this);}
			if(String(rs.fields(i).value).slice(0,4) == 'http'){
				var link = document.createElement('a');
				td.appendChild(link);
				link.href=rs.fields(i).value;
				var newText  = document.createTextNode(rs.fields(i).value);
  				link.appendChild(newText);
			}
	
			else
				td.innerHTML=rs.fields(i).value;
			
			if(!(isNaN(rs.fields(i).value))){
				td.className = "numCell";
			}
	
			if(j % 2 == 0)
				row.className = "even";
			else
				row.className = "odd";
		}
		rs.movenext;
		j++;
	}

}

//クリックされたセルの情報取得
function cellclick(mycell){
	//行位置 thを含む位置となる。mycell.rowIndexだと、Undefinedとなってしまった
	//alert(mycell.parentNode.rowIndex);
	//セル位置
	//alert(mycell.cellIndex)
	//セルの内容
	//alert(mycell.innerHTML);
	//クリックしたセルのある行の先頭の値（ID）を取得
	//alert(mycell.parentNode.cells[0].innerHTML);
	
	//レコードセットオブジェクトを作成する
	rs2 = new ActiveXObject("ADODB.Recordset");
	//SQLを実行しMDBよりデータを取得する
	rs2.ActiveConnection = gConnection;
	rs2.CursorLocation = 3; //adUseClient
	var sql = "select * from table1 where 連番=" + mycell.parentNode.cells[0].innerHTML + ";";
	rs2.Open(sql);
	popup_modal("modal_window.hta");

}

//別ウィンドウを詳細フォームとして使う構想。
function popup_modal(url){
	var argAry = new Array();
	argAry[0] = this; //自分自身のWindwoオブジェクト
	argAry[1] = rs2;
	//第三パラメータで新Windowsのサイズ等が指定できる。ブラウザにより差がありそうだがhtaなら問題無し
	var thirdParam = "dialogWidth=800px; dialogHeight=480px;"
	var ret = showModalDialog(url, argAry,thirdParam);

}

//モーダルダイアログで他のhtaを実行させる。（確認メッセージが出ない、自動で元ウィンドウに戻るメリットはある）
//http://www.ne.jp/asahi/hishidama/home/tech/jscript/dialog.html
function popup_modal_original(url){
	window.showModalDialog(
		url,   //移動先
		this,  //ダイアログに渡すパラメータ（この例では、自分自身のwindowオブジェクト）
		"dialogWidth=800px; dialogHeight=480px;"
	);
}

//ボタン作成
function makebutton(form,caption,classname,onclickfunction){
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = caption;
    btn.id = caption;
    btn.className = classname;
    btn.setAttribute("onclick", new Function(onclickfunction));
    form.appendChild(btn);
}

//テキストボックス作成
function maketextbox(form,id){
    var tbox = document.createElement("input");
    tbox.type = "text";
    tbox.className = 'textbox';
    tbox.id = id;
    form.appendChild(tbox);
}

//データベースに接続する
function connectDb(dbPath){
	try {
		//ADOを使いMDBをオープンする
		gConnection = null;
		gConnection = new ActiveXObject("ADODB.Connection");
		gConnection.Open("Driver={Microsoft Access Driver (*.mdb)};"
		 + " DBQ=" + dbPath);
		return true;

	}catch(error){
		if(gConnection != null){
			gConnection.Close();
			gConnection = null;
		}
	    alert(error.number + "\n" + error.description);
	    return false;
	}
}

//Mainルーチン
//起動画面として、連番の若いレコード10個のフィールド抜粋を表示
//順送りを実装しようとも思ったが、ニーズが無さそうなので考え中
function openfirstquery(){
	//MDBへのパスを設定する
	var shell = new ActiveXObject("WScript.Shell");
	var desktop = shell.SpecialFolders("Desktop");
	//何故か分からないが、￥￥と二個続ける必要があるそうな(Escape用の￥が付いている
	var dbPath = desktop + "\\database.mdb";
	shell = null;
	if(!connectDb(dbPath)) {
	alert("connect error");
	return false;
	}
	//var sql ="SELECT table1.連番, table1.[タイトル], table1.大分類コード, t_大分類.大分類, table1.小分類, table1.概要 FROM table1 LEFT JOIN t_大分類 ON table1.[大分類コード] = t_大分類.[大分類コード];";
	var sql ="SELECT TOP 10 table1.連番, table1.[タイトル], t_大分類.大分類, table1.概要 FROM table1 LEFT JOIN t_大分類 ON table1.[大分類コード] = t_大分類.[大分類コード] ORDER BY table1.連番;";
	try {
		rs = new ActiveXObject("ADODB.Recordset");
		rs.ActiveConnection = gConnection;
		rs.CursorLocation = 3; //adUseClient
		rs.Open(sql);
	} catch(e1) {
		if(rs != null){
			try {rs.Close();} catch(e2) {}
			rs = null;
		}
		throw e1;
		alert(e1.number + "\n" + e1.description);
		return false
	}
	var body = document.getElementsByTagName("body")[0]
	var header = document.createElement('div');
	header.className = "header";
	var title = document.createElement('div');
	title.className = "title"
	var myform = document.createElement('div');
	myform.className = "myform";
	body.appendChild(header);
	header.appendChild(title);
	header.appendChild(myform);
	title.innerHTML = 'MDB レコードセットの表示と操作';
	makeselect(myform,'select1');
	maketextbox(myform,'text1');
	makebutton(myform,'sort','button1',"sort();");	
	makebutton(myform,'filter','button2',"filter();");
	maketable(body);
}

</script>
</head>
<body>

</body>
</html>
=======================================================
☆Modal Window 詳細表示
=======================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="tablestyle.css" type="text/css"/>
<title>Modal Window</title>
<script type="text/javascript">
//modal window のテキストは選択できない→textareaを一部使用
var rs = null;
var opener = null;
window.onload = function(){
  modal_start();
}

function modal_start(){
	var argAry = window.dialogArguments;
	if(argAry != null){
	opener=argAry[0];
	rs = argAry[1];
	}
	
	var body = document.getElementsByTagName("body")[0]
	var header = document.createElement('div');
	header.className = "headermini";
	var title = document.createElement('div');
	title.className = "title"
	var myform = document.createElement('div');
	myform.className = "myform";
		body.appendChild(header);
	header.appendChild(title);
	header.appendChild(myform);
		title.innerHTML = '詳細フォーム';
	makebutton(myform,'exit','button1',"modal_end()");
	for(var i=0; i<rs.fields.count; i++){
		var tnode = document.createTextNode(rs.fields(i).name);
		var mydiv = document.createElement('div');
		if(rs.fields(i).name=="コード"){
			//mydiv.innerHTML = "<pre><code>" + rs.fields(i).value + "</code></pre>";
			mydiv.className = "textarea";
			mydiv.innerHTML = "<textarea cols=86 rows=20>" + rs.fields(i).value + "</textarea>";
			}
		else{
			mydiv.className = "textbox";
			mydiv.innerHTML = rs.fields(i).value;
			}
		//alert(rs.fields(i).value);
		body.appendChild(tnode);
		body.appendChild(mydiv);
	}
}

function makebutton(form,caption,classname,onclickfunction){
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = caption;
    btn.id = caption;
    btn.className = classname;
    btn.setAttribute("onclick", new Function(onclickfunction));
    form.appendChild(btn);
}


function modal_end(){
	//元画面のフォーム操作のテスト
	//opener.document.getElementById('text1').value = "From Modal Window";

	 //元画面の「test()」というjavascriptの関数を呼び出す
	//opener.test();

	//モーダルダイアログの終了
	window.close();

	//終了すると、呼び出し元のshowModalDialog()の直後へ制御が戻る。
}

</script>

</head>

<body>

</body>

</html>

=======================================================
☆Style sheet 両ウィンドウで共有。リリース時はhtaに組み込む方が配布は容易
=======================================================

body {
	text-indent: 0.5em;
}

div.header{
	font-size: large ;
	/*border: solid 3px;*/
	color:	#333333;
	background-color: rgb(198,217,241);
	width:100%;
	padding-top: 10px;
	padding-bottom: 30px;
 	padding-left: 30px;
}
div.headermini{
	font-size: large ;
	/*border: solid 3px;*/
	color:	#333333;
	background-color: rgb(198,217,241);
	width:100%;
	padding-top: 10px;
	padding-bottom: 10px;
 	padding-left: 30px;
 	margin:5px 5px 5px 5px;
}

div.title{
	float:left ;
	height: 40px;
	width:40%;
	font-size: x-large ;
	vertical-align: middle;
	margin-top: 10px;
}

div.myform{
	float:right;
	width:60%;
}

div.textbox{
	color:navy;
	margin:5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
	border: 1px solid gray ;
	width:90%;
	overflow: auto;
}

div.textarea{
	border:none;
	margin:5px 5px 5px 5px;
	/*color:navy; 無効*/
}

/* ドロップダウンの指定 */
select{
    font-size: 1em;
    font-weight: bold;
    border-color: #333333;
    background-color:rgb(242,242,242);
    color: #333333;
    border-style: none;
    width: 100px;
    margin: 0px 10px;
}

/* modal window のdivをTextbox的使用 */
input.textbox{
    font-size: 1em;
    font-weight: bold;
    background-color:rgb(242,242,242);
    color: #333333;
    border-style:solid;
    border-width:1px;
    border-color: #333333;
    width: 200px;
    height:25px
}

/* ボタンの設定 */
input.button1 {
    font-size: 1em;
    font-weight: bold;
    background-color:rgb(198,217,241);
    color: #333333;
    border-style: 1px solid gray;
    width: 60px;
    height: 25px;
    margin-left: 10px;
}

input.button2 {
    font-size: 1em;
    font-weight: bold;
    background-color:rgb(198,217,241);
    color: #333333;
    border-style: 1px solid gray;
    width: 60px;
    height: 25px;
    margin-left: 10px;   
}

/* Buttonをマウスオーバーしたときの色指定 */
input.button1:hover,input.button2:hover{
    background-color: #24d;
    color: #fff;
}

table {border: none;
	border-spacing: 20px;
	margin-top: -22px;
}

td {
	/*width: 100px;*/
	height: 20px;
	text-align: left;
	vertical-align: middle;
	padding-left: 10px;
	padding-right:10px;
	border: 1px solid gray  ;
}

/* 数値と評価されるセルを右寄せ指定 */
td.numCell{
	text-align: right ;
	width:40px;
	padding-left: 5px;
	padding-right:5px;
}

/* row object に指定したクラス名で操作 */
tr.odd {
	background-color: rgb(242,242,242);
}
tr.even {
	background-color:#FFFFFF;
}

 
th{
	color: #333333 ;
}
コンテンツリストに戻る 

//****************************************
//  おまけ： クリップボードの値（テキスト）を読み書きする習作
//****************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無題 1</title>
<style type="text/css">
    <!--
    
    div.header{
	font-size: large ;
	/*border: solid 3px;*/
	color:	#333333;
	background-color: rgb(198,217,241);
	width:100%;
	padding-top: 10px;
	padding-bottom: 10px;
 	padding-left: 30px;
	}
	
	div.title{
		float:left ;
		height: 40px;
		width:60%;
		font-size: x-large ;
		vertical-align: middle;
		margin-top: 10px;
	}
	
	div.myform{
		float:right;
		width:30%;
		margin-right: 20px;
	}
	
    table{
    	margin-top: 5px;
    	border-collapse: collapse;
    	border: 1px solid gray;
	}
	tr.even{
		background-color: rgb(246,246,246);
	}
	tr.odd{
	
	}
    td.cell {
    	border: 1px solid gray;
		color:navy ;
		padding: 5px 5px 5px 5px;
		width: 40px;
			 
			 }
	/* ボタンの設定 */
	input.button1 {
	    font-size: 1em;
	    font-weight: bold;
	    background-color:rgb(242,242,242);
	    color: #333333;
	    border-style: 1px solid gray;
	    width: 80px;
	    height: 50px;
	    margin-left: 10px;
	    float: right ;
	}
		  
	div.clearRight {  
	    clear:right;  
	} 
    -->
</style>

<script type="text/javascript">

var body=null;

window.onload = function(){
  main();
}

//ボタンを作る
function makebutton(form,caption,classname,onclickfunction){
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = caption;
    btn.id = caption;
    btn.className = classname;
    btn.setAttribute("onclick", new Function(onclickfunction));
    form.appendChild(btn);
}

//クリップボードのテキストデータを読み込み、分解してtableに収納
function importCB(){
	var table = document.createElement( 'table' );
	var tbody = document.createElement('tbody');
	var strClipB=null;
	var TAB = String.fromCharCode(9);
	
	body.appendChild(table);
	table.appendChild(tbody);
	
	//HTAであればClipboared操作の警告は出ない
	try{
		strClipB = clipboardData.getData("Text");
	}
	catch(e){
		alert(e);
	}
	
	try{
		var rows = strClipB.split(/\r\n|\r|\n/);
	}
	catch(e){
		if(e == "[object Error]")
			alert("クリップボードの値が不適です");
		else
			alert(e);
		clearTable();
		return false;
	}
	for (i = 0; i < rows.length; i++) {
		var row = tbody.insertRow( tbody.rows.length );
		if(i % 2 == 0)
				row.className = "even";
			else
				row.className = "odd";
		var cells = rows[i].split(TAB);
		for(j=0; j<cells.length; j++)
		{
			var td=row.insertCell(row.cells.length);
			td.onclick =function(){cellclick(this);}
			td.innerHTML=cells[j];
			td.className = "cell";
		}
	}
}

//セルをクリックしたときのイベントルーチン
function cellclick(mycell){
	if (window.clipboardData){
		var result = window.clipboardData.setData( "Text", mycell.innerHTML);
		alert("Clipboardにコピーしました");
	}
}

//tableの消去
function clearTable(){
	try{
		var table = document.getElementsByTagName("table")[0];
		body.removeChild(table);
	}
	catch(e){
		if (e="[object Error]"){
			alert("消去するテーブルがありません");
		}
		else {
			alert(e);
		}
	}
}

//メイン処理
function main(){
	body = document.getElementsByTagName("body")[0];
	window.resizeTo(800,600);
	
	//classは複数指定できるという <p class="center bold"> 
	var header = document.createElement('div');
	header.className = "header";
	var title = document.createElement('div');
	title.className = "title"
	var myform = document.createElement('div');
	myform.className = "myform";
	
	body.appendChild(header);
	header.appendChild(title);
	header.appendChild(myform);
	
	title.innerHTML ='クリップボードからExcelData取込';
	//float:right にしてあるので、右側のボタンから順に設定する必要あり
	makebutton(myform,'Clear','button1',"clearTable();");	
	makebutton(myform,'Import','button1',"importCB();");	
	
	var clearfloat = document.createElement('div');
	clearfloat.className = "clearRight";
	header.appendChild(clearfloat);
}

</script>

<HTA:APPLICATION
    BORDER="thick"
    BORDERSTYLE="normal"
    INNERBORDER="no"
    SCROLLFLAT="yes"
></HTA:APPLICATION>

</head>

<body>

</body>

</html>
コンテンツリストに戻る 

//****************************************
//  おまけ２ エクセルの様に編集可能な表を作成してみる（未完）
//****************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無題 1</title>
<style type="text/css">
    <!--
    
    div.header{
	font-size: large ;
	color:	#333333;
	background-color: rgb(198,217,241);
	width:100%;
	padding-top: 10px;
	padding-bottom: 10px;
 	padding-left: 30px;
	}
	
	div.title{
		float:left ;
		height: 30px;
		width:60%;
		font-size: x-large ;
		vertical-align:top;
		margin-top: 10px;
	}
	
	div.myform{
		float:right;
		width:30%;
		margin-right: 20px;
	}
	
	
	div.contents{
		margin-top: 7px;
	}
	
    table{
    	margin-top: 5px;
    	border-collapse: collapse;
    	border: 1px solid gray;
	}
	tr.even{
		background-color: rgb(242,242,242);
	}
	tr.odd{
	
	}
    td.cell {
    	border: 1px solid gray;
		color:navy ;
		padding: 5px 5px 5px 5px;
		width: 40px;
			 
			 }
	/* ボタンの設定 */
	input.button1 {
	    font-size: 1em;
	    font-weight: bold;
	    background-color:rgb(242,242,242);
	    color: #333333;
	    border-style: 1px solid gray;
	    width: 80px;
	    height: 50px;
	    margin-left: 10px;
	    float: right ;
	}
		  
	div.clearRight {  
	    clear:right;  
	} 
	
	/* 密着したセル状にテキストボックスを配置 */
	input.textbox{
		color: navy;
		margin-left: -1px;
		margin-top: -3px;
		padding:5px 5px 5px 5px;
		border: 1px solid gray;
		width:60px;
		overflow: auto 
		}
	input.odd{
		background-color: #FFF0F0
	
    }
    -->
</style>

<script type="text/javascript">

var body=null;

window.onload = function(){
  main();
}

//ボタンを作る
function makebutton(form,caption,classname,onclickfunction){
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = caption;
    btn.id = caption;
    btn.className = classname;
    btn.setAttribute("onclick", new Function(onclickfunction));
    form.appendChild(btn);
}

//テキストボックス作成
function maketextbox2(form, classname){
	var tbox = document.createElement("input");
	tbox.type="text";
	//classNameを二個持たせてみた
	tbox.className = "textbox " + classname;
	//tbox.id = id;
	form.appendChild(tbox);
}

//テキストファイルへの書き出し
//取り急ぎ、バス指定版
function writeToTextFile(myText){
	var shell = new ActiveXObject("WScript.Shell");
	var desktop = shell.SpecialFolders("Desktop");
	var textFilePath = desktop + "\\testtext.txt";
	shell = null;
	
	var fso = new ActiveXObject("Scripting.FileSystemObject");
	var newTextFile = fso.CreateTextFile(textFilePath, true);
	newTextFile.WriteLine(myText);
	newTextFile.Close();
	fso = null;
}

function writedata(){
	alert("未実装");
}

//メイン処理
function main(){
	body = document.getElementsByTagName("body")[0];
	window.resizeTo(800,400);
	
	//classは複数指定できるという <p class="center bold"> 
	var header = document.createElement('div');
	header.className = "header";
	var title = document.createElement('div');
	title.className = "title"
	var myform = document.createElement('div');
	myform.className = "myform";
	
	body.appendChild(header);
	header.appendChild(title);
	header.appendChild(myform);
	
	body.appendChild(header);
	header.appendChild(title);
	
	//float:right にしてあるので、右側のボタンから順に設定する必要あり
	makebutton(myform,'Output','button1',"writedata();");	
	var clearfloat = document.createElement('div');
	clearfloat.className = "clearRight";
	header.appendChild(clearfloat);
	
	//何故か無効なときがあった
	title.innerHTML ='入力可能なTable';
	//代替法
	//var text = document.createTextNode("Title");
	//title.appendChild(text);

	var contents = document.createElement('div');
	contents.className = "contents";
	body.appendChild(contents)
	
	var ROWSCOUNT = 4;
	var COLUMNSCOUNT = 5;
	//疑似Table作成
	var row = new Array();
	var counter = 0;
	var cellsClass = null;
	for(i=0; i<ROWSCOUNT; i++){
		row[i] = document.createElement('div');
		contents.appendChild(row[i]);
		for(j=0; j<COLUMNSCOUNT; j++){
			if((i % 2) == 0)
				cellsClass='even';
			else
				cellsClass='odd';
			maketextbox2(row[i],cellsClass);
			counter++;
		}
	}
	
	/*
	for(i=0; i<ROWSCOUNT; i++){
		for(j=0; j<COLUMNSCOUNT; j++){
			row[i].childNodes(j).value = String(i) + "," + String(j);
		}
	}
	*/
	
	for(i=0; i<ROWSCOUNT-1; i++){
		for(j=0; j<COLUMNSCOUNT; j++){
			row[i].childNodes(j).value = i * 10 + j;
		}
	}
	var sum=null;
	for(j=0; j<COLUMNSCOUNT; j++){
		sum =0;
		for(i=0; i<ROWSCOUNT-1; i++){
			sum = sum + parseInt(row[i].childNodes(j).value);
		}
		row[ROWSCOUNT-1].childNodes(j).value = String(sum);
	}
	//DOM操作後のHTMLをテキストファイルに書き出してみる
	writeToTextFile(document.getElementsByTagName('html')[0].outerHTML );
}

</script>

<HTA:APPLICATION
    BORDER="thick"
    BORDERSTYLE="normal"
    INNERBORDER="no"
    SCROLLFLAT="yes"
></HTA:APPLICATION>

</head>

<body>

</body>

</html>
コンテンツリストに戻る 

//****************************************
//  おまけ3 CSSを使ってpopupとメニューバーを模擬してみる
//  BOXを用いてpopup windowを模擬してみた。
//　　更に応用して、Windowのメニューバーの様な動作を、CSSで実現してみた
//　　これでHTAアプリの見た目もそれらしくできそう。
//****************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無題 1</title>

<style type="text/css">
	#myheader{
	 width:100%;
	 height: 62px;
	 border-bottom:1px solid black;
	}
	#mymenu{
		width:85%;
		float: left;
	}
	#submenu0{
		display:none;
	}
	#submenu1{
		display:none;
	}	
	#winbuttons{
		width: 15%;
		float:right;
	}
	#exitbutton{
		width:40px;
		height: 40px;
		font-size:30px;
	}
	#mytitle{
		text-align: center ;
		font-family: sans-serif ;
		font-size: large;
	}
	#mycontents{
	 /*position: relative;
	 これを指定しないとウィンドウの左上隅基点で配置される
	 */
	 position: relative;

	}
	#exitpopup{
		width: 20px;
		height: 20px;
	}
div.popup{
	 width: 200px;
	 height: 200px;
	 padding: 5px 5px 5px 5px;
	 background-color: white;
	 border: 1px solid gray;
	 position: absolute;
	 top:40px;
	 left: 20px;
	 display: none;
	 /* http://qiita.com/wings1685/items/0cdee110a3d394409780 */
	 filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=0, strength=3, enabled=true), 
	 progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=90, strength=3, enabled=true), 
	 progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=180, strength=3, enabled=true), 
	 progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=270, strength=3, enabled=true);
	 z-index:2;
	 word-break: break-all;
	}

	button.mainbutton{
		width:80px;
		height: 40px;
		border-style: none ;
		background-color: white;
 	}
 	button.mainbutton:hover{
		color:white ;
		background-color: blue;
	}
	div.menuitem{
		float: left ;
		position: relative 
	}
	.whitebutton {
		border-style: none ;
		background-color: white;
	}	
	.whitebutton:hover {
		color: white ;
		background-color: blue;
	}
	div.submenu{
		position: absolute ;
		top:40px;
		left:0px;
		/* 効かない */
		z-index: 10;
	}
	div.clearfloat{
		clear:both;
	}

</style>

<script type="text/javascript" >

var body=null;
var newpopup=null;

window.onload =function(){
	main();
}

//Main routine 
function main(){
	body = document.getElementsByTagName("body")[0];
	window.resizeTo(600,400);
}
//display sub menu
function displaysub(menuno){
	var submenues=myGetElementsByClassName("submenu");
	
	document.getElementById("submenu" + String(menuno)).style.display ="block";
	//サブメニュー群を複数表示するのを回避
	for(i=0;i<submenues.length;i++){
		if(i != menuno){
				document.getElementById("submenu" + String(i)).style.display ="none";
		}
	}
}
//exec submenu item and hide submenu
function sub(menuno, submenuno){
	switch (menuno){
		case 0:
			if(submenuno == 0){
			document.getElementById("mypopup").style.display ="block";
			}
			else{
				document.getElementById("mypopup").style.display ="none";
			}	
			break;
		//popupをDOMで生成させてみる
		case 1:
			if(submenuno == 0){
				newpopup = document.createElement("div");
				newpopup.className = "popup";
				newpopup.id="newpopup";

				var newbutton = document.createElement("button");
				//newbutton.type = "button"; 何故かエラーになる
				newbutton.className = "whitebutton";
				// こういう記法もできる　結果は一緒
				//newbutton.setAttribute('className', "button");
				
				// =============  onclickの追加に問題あり =============  
				//http://d.hatena.ne.jp/potappo/20061024/1161651356http://d.hatena.ne.jp/potappo/20061024/1161651356
				//newbutton.onclick="closepopup('newpopup')"; 普通にこれではIEの場合NG
				//関数を変数化したものを設定するとOK!
				newbutton.onclick=addOnclick;
			
				var text = document.createTextNode("×");
				newbutton.appendChild(text);
				newpopup.appendChild(newbutton);
				
				var p = document.createElement('p');
				var textp = document.createTextNode("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
				p.appendChild(textp);
				newpopup.appendChild(p);
				
				var mycontents = document.getElementById("mycontents");
				//firstChildとして挿入
				var insertElement = mycontents.insertBefore(newpopup, mycontents.firstChild );
				//これを入れないと、Class="popup"を生かしてスタイルシートを適用したとき表示されなくなる
				newpopup.style.display ="block";

			}
			else{
			
			}
			break;
		default:
		
			break;
	}
	hidesub(menuno);
}
//hide submenu
function hidesub(menuno){
	document.getElementById ("submenu" + String(menuno)).style.display ="none";
}

function closepopup(popupID){
	//alert(popupID);
	document.getElementById(popupID).style.display ="none";
}

//IE8対策（借り物）関数
function myGetElementsByClassName(targetClass){
    var foundElements = new Array();
    if (document.all){
        var allElements = document.all;
    }
    else {
       var allElements = document.getElementsByTagName("*");
    }
    for (i=0,j=0;i<allElements.length;i++) {
        if (allElements[i].className == targetClass) {
            foundElements[j] = allElements[i];
            j++;
        }
    }  
    return foundElements;
}
//IEでonclickを追加するのが簡単にはいかない。下記変数を介すると可能。
var addOnclick = function() {
　　//alert('Test Message');
	closepopup('newpopup');
}

</script>

<HTA:APPLICATION
	BORDER="none"
	BORDERSTYLE="none"
	INNERBORDER="no"
	SCROLL="no"
></HTA:APPLICATION>

</head>

<body>
	<div id="myheader" >
		<div id="mytitle">
			Title
		</div>
		<div id="mymenu" >
			<div id="menuitem0" class="menuitem" >
				<button type="button" id="filebutton" class="mainbutton" onclick="displaysub(0)">File</button>
				<div id="submenu0" class="submenu">
					<button type="button" class="whitebutton" id="filebutton0" onclick="sub(0,0)">FileSub0</button>
					<button type="button" class="whitebutton" id="filebutton1" onclick="sub(0,1)">FileSub1</button>
				</div>
			</div>
			<div id="menuitem1" class="menuitem">
				<button type="button" id="editbutton" class="mainbutton" onclick="displaysub(1)">Edit</button>
				<div id="submenu1" class="submenu">
					<button type="button" class="whitebutton" id="editbutton0" onclick="sub(1,0)">EditSub0</button>
					<button type="button" class="whitebutton" id="editbutton1" onclick="sub(1,1)">EditSub1</button>
				</div>
			</div>
		</div>
		<div id="winbuttons" >
			<div id="exitbutton" >
				<input id="exitbutton" class="whitebutton" type="button" value="×" onclick="window.close()" />
			</div>
		</div>
		<div class="clearfloat" ></div>
	</div>
	
<div id="mycontents">
		<div id="mypopup" class="popup">
			<button type="button" class="whitebutton" id="exitpopup" onclick="closepopup('mypopup')">×</button>
			<p>
				popup window まがい。
				何故かz-indexが無効でサブメニューを隠してしまいます。
				親が違うからかな？
			</p>
		</div>
	</div>
	<p>
	 Home</p>
	<p>
   Excel VBAで画像を取り扱うのに興味を持っています。QAの掲示板で、その手の質問があると回答しておりますが、GDI+の関数名は長いので、
   掲示板の文字数制限に引っかかる事が多いため、休眠状態だったHomePageに載せる事にしました。その他に、ワークシート上の画像を取り扱う上で
   EMF形式等についても調べた結果を載せています。
	</p>
</body>

</html>
コンテンツリストに戻る 

=======================================================
☆おまけ4　ファイル選択ダイアログの現在でも使えるものが見つからないので、自作してみた
　でも、世の中のWebPageでは普通に出来ているのだが？
=======================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>My Title</title>

<style type="text/css" >
</style>

<script type="text/javascript" >


function getfilenames(){
	popup_modal("modal_fileselect.hta");
}

function popup_modal(url){
	var argAry = new Array();
	argAry[0] = this; //自分自身のWindowオブジェクト
	//第三パラメータで新Windowsのサイズ等が指定できる。ブラウザにより差がありそうだがhtaなら問題無し
	var thirdParam = "dialogWidth=800px; dialogHeight=480px;"
	var ret = showModalDialog(url, argAry,thirdParam);
	
	var body=document.getElementsByTagName('body')[0];
	var filelists = document.getElementById('filelist');
	//Modal Dialogからの選択ファイルのパス情報は、hiddenのinputとして、呼び元のDocumentに不可視の情報を生成する。
	if(filelists == null){
		alert("キャンセルされました");
	}else{
		for(var i=0; i<filelists.childNodes.length; i++){
			var filepath = document.createElement('div');
			filepath.innerHTML=filelists.childNodes[i].getAttribute('value');
			body.appendChild(filepath);
		}
	}
}

</script>
</head>

<body>

<HTA:APPLICATION
    APPLICATIONNAME="MyAppli"
    BORDER="thick"
    BORDERSTYLE="normal"
    CAPTION="yes"
    CONTEXTMENU="yes"
    ICON=""
    ID="ID"
    INNERBORDER="yes"
    MAXIMIZEBUTTON="yes"
    MINIMIZEBUTTON="yes"
    NAVIGABLE="no"
    SCROLL="auto"
    SCROLLFLAT="no"
    SELECTION="yes"
    SHOWINTASKBAR="yes"
    SINGLEINSTANCE="no"
    SYSMENU="yes"
    VERSION="1.0"
    WINDOWSTATE="normal"/>
    
    <div><button onclick="getfilenames()" type="button" >get 
    
    filenames</button></div>

</body>
</html>

==========================================
☆modal windowのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="tablestyle.css" type="text/css"/>
<title>Modal Window</title>

<style type="text/css" >
	
/*  下記の文の意味が分からない。アスタリスクや、htmlは何？ */
* html body{
	/* はみ出した部分を隠す */
	overflow: hidden ;
}
	
div.headermini{
	font-size: large ;
	color:	#333333;
	background-color: rgb(198,217,241);
	width:100%;	
	/* 上部メニューを固定にしてみる */
 	position: fixed !important;
 	position:absolute;
 	top:0;
 	left:0;
}

div.myform{
	float:right;
	width:20%;
}
	
	#popup{
	position: absolute;
	/* この変の寸法や比率が微妙に影響する */
	margin-top: 50px;
	height: 85%;
	width:98%;
	overflow: auto;
	
	}
	#dummy{
	clear: both ;	
}
	/* 若干のマージンを入れないと上部が隠れてしまった*/
	#table1{
		margin-top: 10px;
	}
	#table2{
		margin-top: 10px;
	}

	button {
		width:120px;
	}

	tr.checked{
		background-color:#ECF9FF;
	}
	tr.unchecked{
		background-color: white;
	}
	
	td{
		border-style: none;
	}
	
	/* ゴミが入って居ると単に無視されてしまうので要注意 */
	td.column0{width: 80px;	}
	td.column1{width: 60px;	}
	td.column2{width: 30px;　}
	td.column3{
		width: 80px;
		text-align: right
		}
	td.column4{
		width: 200px;
		padding-left: 10px;
		}

</style>

<script type="text/javascript">

//パンくずリストの階層構造を含む配列
var breadarray = null;

var rs = null;
var opener = null;

window.onload = function(){
  modal_start();
}

function modal_start(){

	var argAry = window.dialogArguments;
	if(argAry != null){
	opener=argAry[0];
	}
	var body = document.getElementsByTagName("body")[0]
	var header = document.createElement('div');
	var myform = document.createElement('div');
	header.className = "headermini";
	myform.className = "myform";
	body.appendChild(header);
	header.appendChild(myform);
	
	makebutton(myform,'exit','button1',"modal_end()");
	getfilelist();
	
}

function makebutton(form,caption,classname,onclickfunction){
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = caption;
    btn.id = caption;
    btn.className = classname;
    btn.setAttribute("onclick", new Function(onclickfunction));
    form.appendChild(btn);
}

//modalのデバッグは大変。一個ずつ進めていくしかない。エラーメッセージが出ない。
function modal_end(){
	//var opener=window.dialogArguments; //original
	var sh=new ActiveXObject("Wscript.Shell");
	var folderpath= sh.CurrentDirectory;
	sh=null;
	
	var opener=	window.dialogArguments[0];
	var parentdoc = opener.document;
	var newdiv=parentdoc.getElementById('filelist');
	if(newdiv == null){
		var newdiv=parentdoc.createElement('div');
		newdiv.id="filelist";
	}
	
	var table = document.getElementById ("table2");
	var tbody = table.firstChild;
	for (var i=0; i<tbody.rows.length; i++) { 
		if(tbody.rows[i].className=="checked"){
			var input = parentdoc.createElement('input');
			input.type = "hidden";
			input.value = folderpath + "\\" + tbody.rows[i].cells[4].innerHTML;
			newdiv.appendChild(input);
		}
	}
	var openerbody=parentdoc.getElementsByTagName('body')[0];
	openerbody.appendChild(newdiv);
	
	//モーダルダイアログの終了
	window.close();

	//終了すると、呼び出し元のshowModalDialog()の直後へ制御が戻る。
}

//カレントディレクトリに現在位置を保持する方針に変更 2014/4/10
function getfilelist(){
		var sh=new ActiveXObject("Wscript.Shell");
		var folderpath= sh.CurrentDirectory;
		sh=null;
		
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		//Driveletterはアルファベット一文字のみを戻すので留意
		var drives = fso.Drives;
		var d = new Enumerator(drives);
	  // 指定パスのファイル一覧を得る
	  var folders = fso.GetFolder(folderpath).SubFolders;
	  var f = new Enumerator(folders);
	  var files = fso.GetFolder(folderpath).Files;
	  // ファイルを一つずつ処理する
	  var e = new Enumerator(files);
	  var newdiv = document.createElement( 'div' );
	  newdiv.id = "popup";
	  
	  var breadtable = document.createElement( 'table');
	  newdiv.appendChild(breadtable);
	  var breadbody = document.createElement( 'tbody' );
	  breadtable.appendChild(breadbody);
	  breadtable.id="table1";
	    
	  var row = breadbody.insertRow( breadbody.rows.length );
	  //breadarray はgrovalとする
		breadarray = folderpath.split("\\");
		var breadcolcount = breadarray.length * 2 - 1;
		for (var i = 0; i < breadcolcount; i++) {
			var td=row.insertCell(row.cells.length);
			if(i % 2 == 0){
				td.innerHTML=breadarray[i / 2];				
				td.onclick=function(){breadcellclick(this);}
			}else{
				td.innerHTML = ">";
			}
		}		
	  
		var table = document.createElement( 'table' );
		newdiv.appendChild(table);
		var tbody = document.createElement('tbody');
		table.appendChild(tbody);
		table.id="table2";
		var trhead = document.createElement('tr');
		tbody.appendChild(trhead);
		var columnheader = Array("Date","Time","Type","Size","FileName");
		for(var i=0; i<columnheader.length; i++){
			var th = document.createElement('th');
			trhead.appendChild(th);
			th.innerHTML = columnheader[i];
		}
	  
	//Drive
	  for ( ; !d.atEnd(); d.moveNext()) {
	    var drive = d.item();
			var row = tbody.insertRow( tbody.rows.length );
			for(var i=0; i<columnheader.length; i++){
				var td=row.insertCell(row.cells.length);
				td.onclick =function(){cellclick(this);}
	    	switch (i){    		
	    		case 0:td.innerHTML="";break; 		
	    		case 1:td.innerHTML="";break;
	    		case 2:td.innerHTML="&ltDRIVE&gt";break;
	    		case 3:td.innerHTML="";break;
	    		case 4:td.innerHTML=drive.DriveLetter+":";break;
	    	}
	    }
	  }
	  
	  //Folder
	  for ( ; !f.atEnd(); f.moveNext()) {
	    var folder = f.item();
	    if (!(folder.attributes & 2)){
				var row = tbody.insertRow( tbody.rows.length );
				for(var i=0; i<columnheader.length; i++){
					var td=row.insertCell(row.cells.length);
					td.onclick =function(){cellclick(this);}
	  			//new が必要
	  			var mydate = new Date(folder.DateCreated);
		    	switch (i){    		
		    		case 0:{
		    			td.innerHTML=yyyymmdd(mydate);
		    			break;	    		
		    			}
		    		case 1:{
		    			td.innerHTML=hhmmss(mydate);
		    			break;
		    			}
		    		case 2:td.innerHTML="&ltDIR&gt";break;
		    		case 3:{
		    			try {
		    					td.innerHTML=folder.Size;break;
									}
									catch(err) {
									    //alert("Error Message: " + e.message + " Error Code: " + String(e.number & 0xFFFF) + " Error Name: " + e.name);
										td.innerHTML="";break;
									}
		    			}
		    		case 4:td.innerHTML=folder.Name;break;
		    	}
		    }
			}
	  }
	  //File
	  for ( ; !e.atEnd(); e.moveNext()) {
	    var file = e.item();
	    //システムファイルかどうかで分岐
	    if (!(file.attributes & 2)){
				var row = tbody.insertRow( tbody.rows.length );
				row.className="unchecked";
				for(var i=0; i<columnheader.length; i++){
					var td=row.insertCell(row.cells.length);
					td.onclick =function(){cellclick(this);}
	  			//発想は良かったが new が必要であった
	  			var mydate = new Date(file.DateLastModified);
		    	switch (i){
		    		case 0:{
		    			td.innerHTML=yyyymmdd(mydate);
		    			break;	    		
		    			}
		    		case 1:{
		    			td.innerHTML=hhmmss(mydate);
		    			break;
		    			}
		    		case 2:td.innerHTML="";break;
		    		case 3:td.innerHTML=file.Size;break;
		    		case 4:td.innerHTML=file.Name;break;
		    	}
		    }
		   }
		}
		
		//set class for each column  
	  for (var i=0; i<tbody.rows.length; i++) { //行位置取得。
	   for (var j=0; j<tbody.rows[i].cells.length; j++) { //行内セル位置取得。
		var Cells=tbody.rows[i].cells[j]; //i番行のj番列のセル "td"
		Cells.className= "column" + String(j);
	   } 
  }
	  document.getElementsByTagName("body")(0).appendChild(newdiv);
}

//パンくずリストをクリックしたとき、カレントディレクトリを変更してリストの更新を行う
function breadcellclick(mycell){
	var newarray = new Array();
	for(var i=0; i<=mycell.cellIndex; i+=2){
		newarray[i/2]=breadarray[i/2];
	}
		var sh=new ActiveXObject("Wscript.Shell");
		if(mycell.cellIndex==0){
			sh.CurrentDirectory=breadarray[0]+"\\";
		}else{
			sh.CurrentDirectory=newarray.join("\\");
		}
		sh=null;

		//1) 要素を削除したいオブジェクトの親オブジェクトへの参照を取得。
		var myparent = document.getElementsByTagName("body")(0)
		//2) 要素を削除したいオブジェクトへの参照を取得。
		var target = document.getElementById("popup");
		//3)removeChildメソッドを使って削除
		myparent.removeChild(target);
		getfilelist();
	
}

//Folder名をクリックした時の処理、Drive名の時も作り込む必要あり
function cellclick(mycell){
	//行位置 thを含む位置となる。mycell.rowIndexだと、Undefinedとなってしまった
	//alert(mycell.parentNode.rowIndex);
	//セル位置
	//alert(mycell.cellIndex)
	//セルの内容
	//alert(mycell.innerHTML);
	//クリックしたセルのある行の先頭の値（ID）を取得
	var sh=new ActiveXObject("Wscript.Shell");
	var currentdir=sh.CurrentDirectory
	
	var mytype=mycell.parentNode.cells[2].innerHTML;
	//alert(mytype);
	//セミコロンも入れないとヒットしない
	if(mytype == "&lt;DIR&gt;"){
		//alert(currentdir + "\\" + mycell.parentNode.cells[4].innerHTML);
		//カレントディレクトリにドライブレターを指定しようとするときエラーになる
		sh.CurrentDirectory = currentdir + "\\" + mycell.parentNode.cells[4].innerHTML;

		//1) 要素を削除したいオブジェクトの親オブジェクトへの参照を取得。
		var myparent = document.getElementsByTagName("body")(0)
		//2) 要素を削除したいオブジェクトへの参照を取得。
		var target = document.getElementById("popup");
		//3)removeChildメソッドを使って削除
		myparent.removeChild(target);

		getfilelist();

	}else{
		if(mytype == "&lt;DRIVE&gt;"){
			sh.CurrentDirectory = mycell.parentNode.cells[4].innerHTML+"\\";
	
			//1) 要素を削除したいオブジェクトの親オブジェクトへの参照を取得。
			var myparent = document.getElementsByTagName("body")(0)
			//2) 要素を削除したいオブジェクトへの参照を取得。
			var target = document.getElementById("popup");
			//3)removeChildメソッドを使って削除
			myparent.removeChild(target);
			getfilelist();
		}else{
			var ptr = mycell.parentNode
			if(ptr.className!="checked"){
				ptr.className="checked";
			}else{
				ptr.className="uncheked";
			}
		}
	}
	sh=null;
}

//どうせHTA用なので汎用性を狙わずtoLacaleStringから切り分けても十分なのだが
function yyyymmdd(targetDate){
	var yy = targetDate.getYear();
	var mm = targetDate.getMonth() + 1;
	var dd = targetDate.getDate();
	if (yy < 2000) { yy += 1900; }
	if (mm < 10) { mm = "0" + mm; }
	if (dd < 10) { dd = "0" + dd; }
	var convdate = yy + "/" + mm + "/" + dd;
	return convdate;
}

function hhmmss(targetDate){
	var hh = targetDate.getHours();
	var mm = targetDate.getMinutes() + 1;
	var ss = targetDate.getSeconds();
	if (hh < 10) { hh = "0" + hh; }
	if (mm < 10) { mm = "0" + mm; }
	if (ss < 10) { ss = "0" + ss; }
	var convtime = hh + ":" + mm + ":" + ss;
	return convtime;
}

</script>
</head>
<body>
</body>
</html>
コンテンツリストに戻る 

=======================================================
☆おまけ5　Accdbを使ってみる(Acc2010)
=======================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>My Title</title>

<style type="text/css" >

</style>

<script type="text/javascript" >

var DBBOOLEAN =1;
var DBBYTE=2;
var DBINTEGER=3;
var DBLONG=4;
var DBCURRENCY=5;
var DBSINGLE=6;
var DBDOUBLE=7;
var DBDATE=8;
var DBBYNARY=9;
var DBTEXT=10;
var DBLONGBYNARY=11;
var DBMEMO=12;
var DBGUID=15;
var DBDECIMAL=20;
var DBATTACHMENT=101;

var DBOPENTABLE=1;

//データベース生成
function makeaccdb(){
	var shell = new ActiveXObject("WScript.Shell");
	var desktop = shell.SpecialFolders("Desktop");
	var dbpath = desktop + "\\database01.accdb";
	shell = null;

	var dbe=new ActiveXObject("DAO.DBEngine.120");
	var dbws = dbe.Workspaces(0);
	var db = dbws.CreateDatabase(dbpath,";LANGID=0x411;CP=932;COUNTRY=0");
	db.Close();
	dbws.Close();
	dbe = null;
}

//テーブル作成
function maketable(){
	var shell = new ActiveXObject("WScript.Shell");
	var desktop = shell.SpecialFolders("Desktop");
	var dbpath = desktop + "\\database01.accdb";
	shell = null;

	var dbe=new ActiveXObject("DAO.DBEngine.120");
	var dbws=dbe.Workspaces(0);
	var db=dbws.OpenDatabase(dbpath);
	var tbdef=db.CreateTableDef("t_table1");
	
	var field0=tbdef.CreateField("ID",DBINTEGER);
	var field1=tbdef.Createfield("Name",DBTEXT,20);
	var field2=tbdef.Createfield("Address",DBTEXT,50);
	var field3=tbdef.Createfield("Attach",DBATTACHMENT);
	
	tbdef.Fields.Append(field0);
	tbdef.Fields.Append(field1);
	tbdef.Fields.Append(field2);
	tbdef.Fields.Append(field3);
	
	db.TableDefs.Append(tbdef);
	
	db.Close();
	db=null;
	dbws.Close();
	dbws=null;
	dbe=null;
}

//新レコード追加 添付ファイルも追加してみる
function addnewrecord(){
	var shell = new ActiveXObject("WScript.Shell");
	var desktop = shell.SpecialFolders("Desktop");
	var dbpath = desktop + "\\database01.accdb";
	shell = null;

	var dbe=new ActiveXObject("DAO.DBEngine.120");
	var dbws=dbe.Workspaces(0);
	var db=dbws.OpenDatabase(dbpath);
	var rs=db.OpenRecordset("t_table1",DBOPENTABLE);
	
	rs.AddNew();
	//rs!IDはエラーになるので別の表記を用いた
	rs.Fields("ID")=2;
	rs.Fields("Name")="Tarou";
	rs.Fields("Address")="Tokyo";
	
	with(rs.Fields("Attach").Value){
		Addnew();
		try{
 			Fields("FileData").LoadFromFile(desktop + "\\test2.bmp");
			Update();
		}catch( e ){
		  alert( e );  // バグの内容をダイアログで表示する
		  CancelUpdate();
		}
	}
	rs.Update();
	
	rs.Close();
	rs=null;
	db.Close();
	db=null;
	dbws.Close();
	dbws=null;
	dbe=null;
}
</script>
</head>
<body>
<HTA:APPLICATION
    APPLICATIONNAME="MyAppli"
    BORDER="thick"
    BORDERSTYLE="normal"
    CAPTION="yes"
    CONTEXTMENU="yes"
    ICON=""
    ID="ID"
    INNERBORDER="yes"
    MAXIMIZEBUTTON="yes"
    MINIMIZEBUTTON="yes"
    NAVIGABLE="no"
    SCROLL="auto"
    SCROLLFLAT="no"
    SELECTION="yes"
    SHOWINTASKBAR="yes"
    SINGLEINSTANCE="no"
    SYSMENU="yes"
    VERSION="1.0"
    WINDOWSTATE="normal"/>
    
    <div><button onclick="makeaccdb()" type="button" >Make Accdb</button></div>
    <div><button onclick="maketable()" type="button" >Make Table</button></div>
    <div><button onclick="addnewrecord()" type="button" >Add New Record</button></div>
</body>
</html>