jQueryでdata属性を使いこなす！

jQueryにdata属性というものがあります。

 <input type="hidden" id="datatest" value="1" data-Name="田中　太郎"    >

↑のdata-Name　の部分です。　

data属性はdata-の後に、好きな名前で好きなデータを保持しておく事ができ、これは使いこなすととても便利です！いつか忘れそうなので使い方を記録しておきます。

data属性は好きな名前を付ける事ができます。

 <input type="hidden" id="datatest" value="1" data-Name="田中　太郎"    >

↑のオブジェクトから、Nameを取得したいときはこう指定します

var name=   $("#datatest").attr("data-Name"); ←よく使う

や

var name=  $("#datatest").data("Name"")　←こんな書き方もあるらしい

valueだけではなく、他のパラメーターもセットできるなんて、便利ですね！

とある表のとある行から複数のパラメーターをとってきたいときには、dataクラスがとても便利です！           選択ボタンの中にdata属性を入れておけば、選択を押した時に、生徒番号、名前、学年、組、出席番号をまとめてとってくることもできちゃうんですね！                                                                                                                                                                                                                                                         

生徒一覧

生徒番号	名前	学年	組	出席番号
1000	田中　太郎	1	1	15	選択
1001	鈴木　武	1	2	5	選択
500	伊東　一郎	2	1	2	選択

書き方はこんな感じ。 生徒番号500の選択ボタン

<input type="button" value="選択" id="sentaku_button_500" onclick="sentaku(500)" data-seitobango="500" data-Name="伊藤一郎" data-gakunen="2" data-kumi="1" data-bango="2">

funtion sentaku(No){

 　var name=   $("#sentaku_button"+No).attr("data-Name");

　 var seitobango=   $("#sentaku_button"+No).attr("data-seitobango");

　var gakunen=   $("#sentaku_button"+No).attr("data-gakunen");

　var kumi=   $("#sentaku_button"+No).attr("data-kumi");

}

如何でしたか？とても便利ですね！data属性をぜひ使ってみてください！