How to represent invisible name-value pair data associated with HTML table row?

Background

I am presenting data using a HTML frameset. The left-side frame is a navigation tree-table constructed as an HTML table. Only minimal data is shown in this frame because I want to use the right-side "details" frame to give the user more details when he selects one of the navigation table rows.

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

Think of this like a directory browser where you can see filesize, type, modification date, etc. on the right when you select an item in the left-hand tree.

Obtaining item details server-side is a sequential task, i.e. to get details on the nth item, the server has to work through all n-1 preceding items. For this reason, I think the most straightforward way to present the detailed data to the user is to have the server embed all detailed information within the navigation table rows and have a script generate the details page in a right-hand frame.

Question

How should I represent the detailed data within the navigation table HTML? Should I make up my own element tagnames? Should I use extra columns that are not displayed? Or something else? The data is typically name-value pairs - both name and value can be text. Each element may have a different set of data pairs. Is there a standard way to represent user data within an (X)HTML document?

Solution

NEVER, EVER EVER EVER EVER EVER EVER mix data and display. I also think you can easily get around the iterating over n elements to get the data you require. Here is how you do it.

Create a model (your data storage) in the javascript.

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

Then, using Javascript, you could use the above data to create the following table on the left

<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>

So then you would have your show details function

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

I have created a working example here. There is an error in that code that says showDetails is not defined, but that is due to a jsfiddle issue, the code will work if put into a HTML page. ALSO, be sure to use the strict doctype at the top (to avoid cross browser quirsk).

Might I also suggest, that you look at YUI 2's layout manager instead of using a frameset. Framesets require multiple pages with javascript snaked throughout and can be a maintenance nightmare down the road.