データベースは 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(HTML アプリケーション) : pcname-from-stdout.hta
▼ IE11 : pcname-from-stdout.html
▼ IE11 : pcname-from-stdout.html
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
