HTML表の行に関連付けられた非表示の名前と値のペアデータを表す方法は？

Question

背景

私はHTMLフレームセットを使用してデータを提示しています。左側のフレームは、HTMLテーブルとして構築されたナビゲーションツリーテーブルです。このフレームには最小限のデータしか表示されません。なぜなら、右側の「詳細」フレームを使用して、ナビゲーションテーブルの行の1つを選択したときに詳細をユーザーに伝えたいからです。あなたは左側のツリー内の項目を選択すると、あなたが右になど、ファイルサイズ、種類、更新日時を、見ることができるディレクトリブラウザのような本の

+----------------------------+ 
|   |     | 
| tree  | "details"  | 
| table | pertaining to | 
| nav.  | selected  | 
|   |  row   | 
|=selected=|     | 
|   |     | 
|   |     | 
|   |     | 
+----------------------------+ 

と思います。

サーバサイドの取得はシーケンシャルなタスクです。つまり、n番目のアイテムの詳細を取得するには、サーバはすべてのn-1個の先行アイテムを処理する必要があります。このため、詳細なデータをユーザーに提示する最も簡単な方法は、サーバーにすべての詳細情報をナビゲーションテーブルの行に埋め込み、右側のフレームに詳細ページを生成するスクリプトを用意することです。

質問

はどのようにして、ナビゲーションテーブルのHTML内の詳細なデータを表現する必要がありますか？私は自分の要素のタグネームを作りますか？表示されない余分な列を使用する必要がありますか？または、他の何か？データは通常、名前と値のペアです。名前と値の両方をテキストにすることができます。各要素は異なるデータ・セットのセットを持つことができます。 （X）HTML文書内でユーザーデータを表現する標準的な方法はありますか？

Answer 1

データとディスプレイをミックスしたことはありません。また、必要なデータを得るためにn個の要素を反復することも簡単にできると思います。あなたのやり方は次のとおりです。

javascriptでモデル（データストレージ）を作成します。

var data = [ 
    { 
     title: "item 1", 
     foo: "bar", 
     baz: 10 
    }, 
    { 
     title: "item 2", 
     foo: "bazbar", 
     baz: 20 
    } 
]; 

その後、Javascriptを使用して、あなたはそう、あなたはあなたのショーの詳細は、私が

function showDetails(index){ 
    var currentData = data[index]; 
    /* Do something with data */ 
} 

機能しなければなら左

<table> 
    <tr><td><a href="#" onclick="showDetails(0);return false;">item 1</a></td></tr> 
    <tr><td><a href="#" onclick="showDetails(1);return false;">item 2</a></td></tr> 
</table> 

上で、次の表を作成するために、上記のデータを使用することができます作業例hereを作成しました。 showDetailsが定義されていないというコードにはエラーがありますが、それはjsfiddleの問題によるものです.HTMLページに入ればコードは機能します。また、上部に厳密なdoctypeを使用するようにしてください（ブラウザ間違いを避けるため）。

おそらく、フレームセットを使用する代わりにYUI 2's layout managerを見ることをお勧めします。フレームセットには複数のページが必要ですが、javascriptは全体を通して蛇行しており、道のりの維持の悪夢となります。