Jquery - 各行に固有の変数にアクセスしますか？

Question

私は、Webページを持っているし、データベースをキシにし、そのような表の結果表示のphpイムを使用して：今各行はデータベースからで、その行に固有のユニークな情報を提供してい

<table id="tablelist"> 
<thead> 
<tr> 
<th>Header1</th> 
<th>Header2</th> 
<th>Header3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Info here1</td> 
<td>Info here1</td> 
<td class="actions">Action1 - Action2 - Action3</td> 
</tr> 
<tr> 
<td>Info here2</td> 
<td>Info here2</td> 
<td class="actions">Action1 - Action2 - Action3</td> 
</tr> 
</tbody> 
</table> 

を。たとえば、プライマリID、日付、カテゴリなどです。誰かが行のいずれかのアクションをクリックすると、クリックした行に固有の2つの情報を取得する必要があります。現在、私はこれをやってみました：

<div class="row_data">{info2 in json format}</div>  
<tr> 
    <td>Info here1</td> 
    <td>Info here1</td> 
    <td class="actions">Action1 - Action2 - Action3</td> 
    </tr> 
<div class="row_data">{info2 in json format}</div>  
<tr> 
    <td>Info here2</td> 
    <td>Info here2</td> 
    <td class="actions">Action1 - Action2 - Action3</td> 
    </tr> 

誰かがアクションリンクをクリックしたときに、それはJSON形式であるrow_dataの前の値を、になるだろう。私はjsonを使用してjson値を解析し、残りのjqueryコード内にある情報を使用します。しかし、私はこれが無効なhtmlであり、推奨されていないと言われました。アクションがクリックされたときに使用する行ごとの動的データをストーリー化してjqueryコードで参照できるようにするには、どのような方法をお勧めしますか？それを行うには

Answer 1

方法が使用HTML 5のデータ属性れる：

<tr id="foo" data-something="put whatever you want in here"> 
    <!-- content --> 
</tr> 

をあなたはその後、

$("#foo").data("something") 

であなたがそこに格納された情報にアクセスすることができますdata-somethingの値は、（あなたが好きな何もすることができますあなたがPHPから直接エコーしている場合はhtmlspecialcharsでフィルタリングされている限り）、さらに便利な場合は複数のデータ属性を使用することができます（通常はそうです）。

件名にはpost by John Resigもあります。

Answer 2

Jonの提案はうまくいきますが、データをHTMLに埋め込むのが嫌いです。そのため、idからデータへのJSONマップを作成し、それらのIDをTRに追加します。クリックハンドラからTRのIDを取得し、マップからデータを検索します。

Answer 3

私はいくつかのいずれかの任意の行にアクション1をクリックすると言っ

...私は疲れていると私は完全に間違って何かを示唆している場合ので、ご容赦くださいこれを誤解しているかもしれないと思います。おそらく、あなたはjson_infoのHTMLが正しくフォーマットされたJSON文字列であるならば、することができるはず

<tr> 
    <td class="json_info" style="display:none">{your json string}</td> 
    <td>Info 1</td> 
    <td>Info 2</td> 
    <td><a class="action">action link</a></td> 
</tr> 

$('.action').click(function(){ 
    var json = $(this).parent().find('.json_info').html(); 
}); 

...あなたはあなたのリンクに「アクション」と呼ばれるクラスを与えると仮定し、各リンクをクリックしてリスナーを開始しますこのjquery選択呼び出しからjsonを正しく読み込みます。