JavaScriptのみでデータをMySQLのように使えるjavascriptDBの使い方（その1）で、javascriptDBの簡単な設定方法は説明したが、ページ内に埋め込むことを考え、スタイルシートが使えるように出力されるテーブルにidやclassを設定したり、タグを設定するための方法を説明する。
設定方法
jqueryおよびダウンロードしたdb_core.jsを読み込む
JAVASCRIPT
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="db_core.js"></script>
同様にheader内でjavascriptDBの設定
（別ファイルにしても構わない）
JAVASCRIPT
<script>
var DBTest = new Database ("DBTest");
DBTest.CreateTable("members",Array("id","login","passwd","tel"));
DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));
var selectArr1 = DBTest.Select('select * from members');
var selectArr2 = DBTest.Select('select passwd from members where login="joan"');
var selected1 = mView(selectArr1);
var selected2 = mView(selectArr2);
$(document).ready(function(){
$("#output1").html(selected1);
$("#output2").html(selected2);
});
function mView (o){
var res = "<table>";
for(i = 0; i < o.length; i++){
res += "<tr>";
for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
res += "</tr>";
}
res += "</table>";
return res;
}
</script>
ボディ内の書き出したい場所にid=”output1″、id=”output2″を設置
HTML
<body>
<h2>select * from members</h2>
<div id="output1"></div>
<h2>select passwd from members where login="joan"</h2>
<div id="output2"></div>
</body>
サンプルページ
上記サンプルにアクセスすると以下のデータが出力される
<h2>select * from members</h2>
<div id="output1">
<table>
<tbody>
<tr>
<td>1</td>
<td>rosibel</td>
<td>clau</td>
<td>934856890</td>
</tr>
<tr>
<td>2</td>
<td>joan</td>
<td>palafrugell</td>
<td>934856890</td>
</tr>
</tbody>
</table>
</div>
<h2>select passwd from members where login="joan"</h2>
<div id="output2">
<table>
<tbody>
<tr>
<td>palafrugell</td>
</tr>
</tbody>
</table>
</div>
解説
1. データベースをセット
var DBTest = new Database ("DBTest");
2. テーブル名とカラム名をセット
DBTest.CreateTable(“members”,Array(“id”,”login”,”passwd”,”tel”));
3. データを挿入
DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));
4-1. セレクト文にて全データを出力（mySQLと同様）
var selectArr1 = DBTest.Select('select * from members');
4-2. MySQLと同様にwhereを使って条件抽出も可能
var selectArr2 = DBTest.Select('select passwd from members where login="joan"');
5. 各抽出データをテーブルに成形 ※1
var selected1 = mView(selectArr1);
var selected2 = mView(selectArr2);
6. 各データをjqueryを使って書き出し
$(document).ready(function(){
$("#output1").html(selected1);
$("#output2").html(selected2);
});
※1 javascriptDBの結果をテーブルに成形するfunction
function mView (o){
var res = "<table id='my-tbl'>";
for(i = 0; i < o.length; i++){
res += "<tr>";
for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
res += "</tr>";
}
res += "</table>";
return res;
}
※1で javascriptDBの結果をテーブルタグで書き出すように設定しているが、サンプルのように<table>にidを設定（<table id=’my-tbl’>）したり、必要に応じて<hd>の代わりに<th>を使ったり<td class=’col-ab’>のようにすることができる。
あとは書き出したタグに対応したスタイルシートを設定すればいい。
CSS
<style>
h2 {
margin-bottom:1px;
font-weight:normal;
font-size:1em;
}
table {
border-collapse: collapse;
}
table td {
padding:2px 8px;
text-align:center;
border:1px solid #ccc;
}
</style>
