[JavaScript] HTMLタグに任意の属性をセットする #dataset

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBサイトでのシステムを構築する際に、tableタグやliタグなどで、データリストを表示したり、特定のエレメントに任意の値を付けておきたい時があります。
そんな時にできる方法をまとめてみました。

サンプルHTMLソース

1.JSONデータで管理する

外部DBなどでデータ管理している場合は、JSONデータをAJAXで受け取り、上記のようなデータを動的にページにセットできるようにしておけば、システムでの取り出しには有効です。
ただし、HTMLソース部分と、JSONデータ部分が別箇所に書かれる事になるので、連動管理できる仕組みが必要になりますので、システム修正やデバッグなどの際にトラブルになる可能性はあります。

2.HTMLの属性に書き込む

「data-**」として**の部分は任意のkey値をセットできる。
値は、改行や特殊記号は含めないが、数値やID値など、システムでの情報を記述することが可能になる。
しかも、keyの値が重複しなければいくつでも登録が可能だ。

データ取得方法

・Attribute方式

・dataset方式

データ書き込み方法

・Attribute方式

・dataset方式

dataset属性は便利

HTMLタグでのシステムはWEBシステムにおいては必須なやり方なので、上記のやり方のフレームワークなどを作っておくことをオススメしたい。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です