WEBサイトでのシステムを構築する際に、tableタグやliタグなどで、データリストを表示したり、特定のエレメントに任意の値を付けておきたい時があります。
そんな時にできる方法をまとめてみました。
サンプルHTMLソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>javascript [dataset]</title>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<h1>JavaScript - DataSet</h1>
<ol>
<li class="parts">No.1</li>
<li class="parts">No.2</li>
<li class="parts">No.3</li>
<li class="parts">No.4</li>
<li class="parts">No.5</li>
</ol>
</body>
</html>
1.JSONデータで管理する
<script type="text/javascript">
var data_parts={
parts1:{
no:1,
memo:"hare"
},
parts2:{
no:2,
memo:"ame"
},
parts3:{
no:3,
memo:"kumori"
},
parts4:{
no:4,
memo:"yuki"
},
parts5:{
no:5,
memo:"test"
}
};
</script>
外部DBなどでデータ管理している場合は、JSONデータをAJAXで受け取り、上記のようなデータを動的にページにセットできるようにしておけば、システムでの取り出しには有効です。
ただし、HTMLソース部分と、JSONデータ部分が別箇所に書かれる事になるので、連動管理できる仕組みが必要になりますので、システム修正やデバッグなどの際にトラブルになる可能性はあります。
2.HTMLの属性に書き込む
<ol>
<li class="parts" data-no="1" data-memo="hare" >No.1</li>
<li class="parts" data-no="2" data-memo="ame" >No.2</li>
<li class="parts" data-no="3" data-memo="kumori">No.3</li>
<li class="parts" data-no="4" data-memo="yuki" >No.4</li>
<li class="parts" data-no="5" data-memo="test" >No.5</li>
</ol>
「data-**」として**の部分は任意のkey値をセットできる。
値は、改行や特殊記号は含めないが、数値やID値など、システムでの情報を記述することが可能になる。
しかも、keyの値が重複しなければいくつでも登録が可能だ。
データ取得方法
・Attribute方式
var data_no[1] = element.getAttribute("data-no");
・dataset方式
var data_no[1] = element.dataset.no;
データ書き込み方法
・Attribute方式
element.setAttribute("data-no" , 100);
・dataset方式
element.dataset.no = 100;
dataset属性は便利
HTMLタグでのシステムはWEBシステムにおいては必須なやり方なので、上記のやり方のフレームワークなどを作っておくことをオススメしたい。
