HTA / ADO / Jscript : Access( .accdb .mdb ) の読み込みと表示 : logical　error

Google

2020年11月12日

HTA / ADO / Jscript : Access( .accdb .mdb ) の読み込みと表示

データベースは Access です。こちらからダウンロードしてください。ダウンロードして解凍した .accdb または .mdb へのパスは以下のようにしてソースコード上で固定で設定しています
 var db_path = "C:\\temp\\hanbaic.accdb";



ドライバが無い場合はこちらからダウンロードして AccessDatabaseEngine.exe を実行します

※ HTA は 32ビットです


この HTA を localhost の IE11 で実行する事ができます。その場合は、IE11 の設定が必要です。その方法はこちらをご覧ください。
※ IE11 で動かす最も大きな目的は、開発者ツールでデバッグができるからです。

<!DOCTYPE html>
<html>
<head>
<!-- edge : 主に hta 用 / VBScript を混在する場合は IE11 で IE10 ) -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta charset="utf-8">

<title>utf-8 ADO 問合せ処理</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">

<script>
// ***********************
// カンマ編集
// ***********************
String.prototype.number_format = 
function (prefix) {
	var num = this.valueOf();
	prefix = prefix || '';
	num += '';
	var splitStr = num.split('.');
	var splitLeft = splitStr[0];
	var splitRight = splitStr.length > 1 ? '.' + splitStr[1] : '';
	var regx = /(\d+)(\d{3})/;
	while (regx.test(splitLeft)) {
		splitLeft = splitLeft.replace(regx, '$1' + ',' + '$2');
	}
	return prefix + splitLeft + splitRight;
}
// ***********************
// カンマ編集削除
// ***********************
String.prototype.remove_number_format = 
function () {
	var num = this.valueOf();
	return num.replace(/([^0-9\.\-])/g, '');
}

// ********************************************************
// ADO オブジェクト
// 3 : クライアント側カーソル
// https://docs.microsoft.com/ja-jp/sql/ado/reference/ado-api/cursorlocationenum
// ********************************************************
var cn = new ActiveXObject( "ADODB.Connection" );
cn.CursorLocation = 3;
var rs = new ActiveXObject( "ADODB.Recordset" );

// ***********************
// このパスを変更
// ***********************
var db_path = "C:\\temp\\hanbaic.accdb";
// ***********************

// ********************************************************
// https://www.microsoft.com/ja-jp/download/details.aspx?id=13255 ( ドライバ )
// 接続文字列 : ODBC用
// https://docs.microsoft.com/ja-jp/dotnet/api/system.data.odbc.odbcconnection.connectionstring
// ********************************************************
var connection_string = "Provider=MSDASQL;Driver={Microsoft Access Driver (*.mdb, *.accdb)};Dbq=" + db_path + ";";

// ***********************
// エラー制御
// ***********************
var error_flg = false;

// ***********************
// 実行 SQL
// ***********************
var query = "select * from 社員マスタ";

$(function(){

	// **************************************
	// Windows を中央に移動
	// **************************************
	var target = window.location + "";

	if ( target.indexOf("file:") != -1 ) {

		try {
			var w = screen.width - 400;
			var h = screen.height - 200;
			top.resizeTo( w, h );
			top.moveTo((screen.width-w)/2, (screen.height-h)/2 );
		}
		catch( e ) {}

	}

	// **************************************
	// ADO 処理( ここから )
	// **************************************
	try {
		// ***********************
		// DB 接続
		// ***********************
		cn.open( connection_string );
	}
	catch (e) {
		error_flg = true;
		alert(e.description);
	}
	
	if ( error_flg ) {
		return;
	}

	try {
		// ***********************
		// レコードセット取得
		// ***********************
		rs.open( query, cn );
	}
	catch (e) {
		error_flg = true;
		alert(e.description);
	}

	var table_body = $("#tbl");
	var row_unit = $("<tr></tr>");

	// ***********************
	// タイトル部用、列名取得
	// ***********************
	for( loop_idx = 0; loop_idx < rs.fields.count; loop_idx++ ) {
		$("<th></th>")
			.text( rs.fields(loop_idx).name )
			.appendTo( row_unit );
	}
	row_unit.appendTo( table_body );


	// ***********************
	// 行取得ループ
	// ***********************
	while( !rs.EOF ) {

		// 行オブジェクト
		row_unit = $("<tr></tr>");
		
		// *********************************************
		// 列オブジェクトを作成して行オブジェクトに追加
		// *********************************************
		$("<td></td>")
			.text( rs.fields("社員コード").value )
			.appendTo( row_unit );

		$("<td></td>")
			.text( rs.fields("氏名").value )
			.appendTo( row_unit );

		$("<td></td>")
			.text( rs.fields("フリガナ").value )
			.appendTo( row_unit );

		$("<td></td>")
			.text( rs.fields("所属").value )
			.appendTo( row_unit );

		$("<td></td>")
			.text( rs.fields("性別").value )
			.appendTo( row_unit );
			
		date_work = new Date( rs.fields("作成日").value );
		date_string = date_work.getFullYear() + "/" + (date_work.getMonth()+1) + "/" + date_work.getDate();
		$("<td></td>")
			.text( date_string )
			.appendTo( row_unit );

		date_work = new Date( rs.fields("更新日").value );
		date_string = date_work.getFullYear() + "/" + (date_work.getMonth()+1) + "/" + date_work.getDate();
		$("<td></td>")
			.text( date_string )
			.appendTo( row_unit );


		$("<td></td>")
			.text( rs.fields("給与").value )
			.appendTo( row_unit );

		$("<td></td>")
			.text( rs.fields("手当").value )
			.appendTo( row_unit );

		$("<td></td>")
			.text( rs.fields("管理者").value )
			.appendTo( row_unit );
			
		date_work = new Date( rs.fields("生年月日").value );
		date_string = date_work.getFullYear() + "/" + (date_work.getMonth()+1) + "/" + date_work.getDate();
		$("<td></td>")
			.text( date_string )
			.appendTo( row_unit );

		// 行オブジェクトを テーブルオブジェクトに追加
		row_unit.appendTo( table_body );

		// ***********************
		// 次の行を取得
		// ***********************
		rs.MoveNext();
	}
	
	// ***********************
	// レコードセットを閉じる
	// ***********************
	rs.close();

	// ***********************
	// 接続解除
	// ***********************
	cn.close();

	// ***********************
	// オブジェクトの解放
	// ***********************
	cn = null;
	// **************************************
	// ADO 処理( ここまで )
	// **************************************


	// **************************************
	// テーブルに対する処理
	// **************************************
	$("#tbl tr").each(function(idx){

		// **************************************
		// イベント登録
		// **************************************
		$(this).on("dblclick", function(idx){

			var text = "";

			$(this).find("td").each(function(idx){
				console.log( idx + ":" + $(this).text() );

				if ( idx == 7 || idx == 8 ) {
					text += idx + ":" + ($(this).text()).remove_number_format() + " ";
				}
				else {
					text += idx + ":" + $(this).text() + " ";
				}
			});

			$("#result").text( text );

		});

		// **************************************
		// データ部分のフォーマットと右寄せ
		// **************************************
		$(this).find("td").each(function(idx){

			switch( idx ) {
				case 7:
					$(this).css({"text-align": "right" });
					$(this).text( ($(this).text()).number_format() );
					break;
				case 8:
					$(this).css({"text-align": "right" });
					$(this).text( ($(this).text()).number_format() );
					break;
			}

		});

		// **************************************
		// タイトル部分の右寄せ
		// **************************************
		$(this).find("th").each(function(idx){

			switch( idx ) {
				case 7:
					$(this).css({"text-align": "right" });
					break;
				case 8:
					$(this).css({"text-align": "right" });
					break;
			}

		});

	});
	// **************************************
	// テーブルに対する処理
	// **************************************


});

</script>

<style>
/* ****************************
1) 列のカーソルは常に矢
2) 改行コードを有効
******************************/
td,th {
	cursor: default!important;
	white-space: pre;
}

body {
	margin: 0;
	padding: 16px;
}

/* ****************************
テーブル内のデータを選択不可
( ダブルクリック対応 )
******************************/
#tbl {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* ****************************
スクロール無しの状態時の
最上部にデータ表示場所を用意
******************************/
table {
	margin-top: 36px;
}

/* ****************************
ダブルクリック時に内容を表示
するブロックの表示方法
******************************/
#result {
	font-weight: bold;	/* 太文字 */
	color: navy;	/* 文字色 */
	position: fixed;	/* 表示位置固定 */
	height: 34px;	/* ブロック高さ */
	background-color: #fff;	/* ブロック背景色 */
	padding: 5px;	/* ブロック内側余白 */
}

</style>
</head>
<body>

	<!-- ダブルクリックの結果を表示する / fixed で位置固定 -->
	<div id="result"></div>

	<table class="table table-hover">
		<!-- bootstrap 対応の為、tbody に対して処理 -->
		<tbody id="tbl">
		</tbody>
	</table>

</body>
</html>


以下は、列情報を自動取得しています
( ※ 自由な SELECT 文で表示可能です )

<!DOCTYPE html>
<html>
<head>
<!-- edge : 主に hta 用 / VBScript を混在する場合は IE11 で IE10 ) -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta charset="utf-8">

<title>utf-8 ADO 問合せ処理</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">

<script>
// ***********************
// カンマ編集
// ***********************
String.prototype.number_format = 
function (prefix) {
	var num = this.valueOf();
	prefix = prefix || '';
	num += '';
	var splitStr = num.split('.');
	var splitLeft = splitStr[0];
	var splitRight = splitStr.length > 1 ? '.' + splitStr[1] : '';
	var regx = /(\d+)(\d{3})/;
	while (regx.test(splitLeft)) {
		splitLeft = splitLeft.replace(regx, '$1' + ',' + '$2');
	}
	return prefix + splitLeft + splitRight;
}
// ***********************
// カンマ編集削除
// ***********************
String.prototype.remove_number_format = 
function () {
	var num = this.valueOf();
	return num.replace(/([^0-9\.\-])/g, '');
}

// ********************************************************
// ADO オブジェクト
// 3 : クライアント側カーソル
// https://docs.microsoft.com/ja-jp/sql/ado/reference/ado-api/cursorlocationenum
// ********************************************************
var cn = new ActiveXObject( "ADODB.Connection" );
cn.CursorLocation = 3;
var rs = new ActiveXObject( "ADODB.Recordset" );

// ***********************
// このパスを変更
// ***********************
var db_path = "C:\\temp\\hanbaic.accdb";
// ***********************

// ********************************************************
// https://www.microsoft.com/ja-jp/download/details.aspx?id=13255 ( ドライバ )
// 接続文字列 : ODBC用
// https://docs.microsoft.com/ja-jp/dotnet/api/system.data.odbc.odbcconnection.connectionstring
// ********************************************************
var connection_string = "Provider=MSDASQL;Driver={Microsoft Access Driver (*.mdb, *.accdb)};Dbq=" + db_path + ";";

// ***********************
// エラー制御
// ***********************
var error_flg = false;

// ***********************
// 実行 SQL
// ***********************
var query = "select * from 得意先マスタ";

$(function(){

	// **************************************
	// Windows を中央に移動
	// **************************************
	var target = window.location + "";

	if ( target.indexOf("file:") != -1 ) {

		try {
			var w = screen.width - 400;
			var h = screen.height - 200;
			top.resizeTo( w, h );
			top.moveTo((screen.width-w)/2, (screen.height-h)/2 );
		}
		catch( e ) {}

	}

	// **************************************
	// ADO 処理( ここから )
	// **************************************
	try {
		// ***********************
		// DB 接続
		// ***********************
		cn.open( connection_string );
	}
	catch (e) {
		error_flg = true;
		alert(e.description);
	}
	
	if ( error_flg ) {
		return;
	}

	try {
		// ***********************
		// レコードセット取得
		// ***********************
		rs.open( query, cn );
	}
	catch (e) {
		error_flg = true;
		alert(e.description);
	}

	var table_body = $("#tbl");
	var row_unit = $("<tr></tr>");

	var typeArray = [];

	// ***********************
	// タイトル部用、列名取得
	// ***********************
	for( loop_idx = 0; loop_idx < rs.fields.count; loop_idx++ ) {
		$("<th></th>")
			.text( rs.fields(loop_idx).name )
			.appendTo( row_unit );
		typeArray.push( rs.fields(loop_idx).type );
	}
	row_unit.appendTo( table_body );


	// ***********************
	// 行取得ループ
	// データ型
	// https://docs.microsoft.com/ja-jp/sql/ado/reference/ado-api/datatypeenum
	// ***********************
	while( !rs.EOF ) {

		// 行オブジェクト
		row_unit = $("<tr></tr>");
		for( loop_idx = 0; loop_idx < rs.fields.count; loop_idx++ ) {
			if( typeArray[loop_idx] == 133 || typeArray[loop_idx] == 135 ) {
				var date_work = new Date( rs.fields(rs.fields(loop_idx).name).value );
				var date_string = date_work.getFullYear() + "/" + (date_work.getMonth()+1) + "/" + date_work.getDate();
				$("<td></td>")
					.text( date_string )
					.appendTo( row_unit );
			}
			else {
				$("<td></td>")
				.text( rs.fields(rs.fields(loop_idx).name).value )
				.appendTo( row_unit );
			}
		}
		row_unit.appendTo( table_body );

		// ***********************
		// 次の行を取得
		// ***********************
		rs.MoveNext();
	}
	
	// ***********************
	// レコードセットを閉じる
	// ***********************
	rs.close();

	// ***********************
	// 接続解除
	// ***********************
	cn.close();

	// ***********************
	// オブジェクトの解放
	// ***********************
	cn = null;
	// **************************************
	// ADO 処理( ここまで )
	// **************************************


	// **************************************
	// テーブルに対する処理
	// **************************************
	$("#tbl tr").each(function(idx){

		// **************************************
		// イベント登録
		// **************************************
		$(this).on("dblclick", function(idx){

			var text = "";

			$(this).find("td").each(function(idx){
				console.log( idx + ":" + $(this).text() );
				text += idx + ":" + $(this).text() + " ";
			});

			$("#result").text( text );

		});

		// **************************************
		// データ部分のフォーマットと右寄せ
		// **************************************
		$(this).find("td").each(function(idx){

			if ( typeArray[idx] == 3 ) {
				$(this).css({"text-align": "right" });
				$(this).text( ($(this).text()).number_format() );
			} 

		});

		// **************************************
		// タイトル部分の右寄せ
		// **************************************
		$(this).find("th").each(function(idx){

			if ( typeArray[idx] == 3 ) {
				$(this).css({"text-align": "right" });
			}

		});

	});
	// **************************************
	// テーブルに対する処理
	// **************************************


});

</script>

<style>
/* ****************************
1) 列のカーソルは常に矢
2) 改行コードを有効
******************************/
td,th {
	cursor: default!important;
	white-space: pre;
}

body {
	margin: 0;
	padding: 16px;
}

/* ****************************
テーブル内のデータを選択不可
( ダブルクリック対応 )
******************************/
#tbl {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* ****************************
スクロール無しの状態時の
最上部にデータ表示場所を用意
******************************/
table {
	margin-top: 36px;
}

/* ****************************
ダブルクリック時に内容を表示
するブロックの表示方法
******************************/
#result {
	font-weight: bold;	/* 太文字 */
	color: navy;	/* 文字色 */
	position: fixed;	/* 表示位置固定 */
	height: 34px;	/* ブロック高さ */
	background-color: #fff;	/* ブロック背景色 */
	padding: 5px;	/* ブロック内側余白 */
}

</style>
</head>
<body>

	<!-- ダブルクリックの結果を表示する / fixed で位置固定 -->
	<div id="result"></div>

	<table class="table table-hover">
		<!-- bootstrap 対応の為、tbody に対して処理 -->
		<tbody id="tbl">
		</tbody>
	</table>

</body>
</html>

タグ：HTA IE

【HTA ( HTMLアプリケーション )の最新記事】

posted by lightbox at 2020-11-12 15:20 | HTA ( HTMLアプリケーション ) |

Seesaa ブログ

	SQLServer の BCP で INT IDENTITY 列に csv からリストアする
	MySQL に PIPES_AS_CONCAT を設定して、CSV を出力する SQL
	Chrome ポリシー : レジストリ : ( ChatGPT 解説 )
	PL/SQL : 最も簡単な CSV 出力の記述
	VBScript を『管理者として実行する』には、Shell の runas ( 右クリックメニューの実行と同等 ) で実現します / Jscript も追加
	fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信
	TCPDF をダウンロードして、Windows の任意のフォルダで TCPDF 同梱のサンプルを実行する為の設定
	JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
	TCPDF をダウンロードして、フリーフォントを埋め込み型で使用する方法
	汎用型 : JSON データより履歴書のフォームを出力するサンプル
	ChatGPT でトップまでスクロールするブックマークレット
	Replit : cs-list
	Replit : js-web-speech
	Replit : js-csv-read-utf8
	Replit : text-editor
	指定した位置でレジストリエディタを開く為の VBScript をダウンロードします
	JScript / VBScript : 指定したフォルダ内のフォルダ毎の使用済みサイズを読める範囲でレポートする
	デスクトップを部分キャプチャした時に切り取り&スケッチを起動してキャプチャ画像に枠線を付加させる。
	#Zoom の必殺技 : 相手に自分の Zoom 関連のウインドウを見せる
	GAS でユーザ作成 : 組織は "orgUnitPath": "/組織名A/組織名B"

	一部のファイル形式がブロックされる(GMail)
	Creating Shortcut Menu Handlers
	Microsoft Word のキーボードショートカット
	Excel のショートカットキーとファンクションキー
	サイトへの不自然なリンクを否認する新しいツールの提供を開始しました

logical error

2020年11月12日

HTA / ADO / Jscript : Access( .accdb .mdb ) の読み込みと表示

logical　error