如何表示与HTML表行关联的不可见名称-值对数据？

背景

我使用HTML框架集呈现数据。左侧框架是构建为HTML表的导航树表。此框架中只显示最小的数据，因为我希望在用户选择导航表行之一时使用右侧的“详细信息”框架为用户提供更多详细信息

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

把它想象成一个目录浏览器，当您在左边的树中选择一个项目时，您可以在右边看到文件大小、类型、修改日期等

在服务器端获取项目详细信息是一项连续任务，即，要获取第n个项目的详细信息，服务器必须处理前面的所有n-1个项目。出于这个原因，我认为向用户呈现详细数据最直接的方法是让服务器将所有详细信息嵌入导航表行中，并让脚本在右侧框架中生成详细信息页面

问题

---

我应该如何表示导航表HTML中的详细数据？我应该创建自己的元素标记名吗？我应该使用未显示的额外列吗？还是别的什么？数据通常是名称-值对-名称和值都可以是文本。每个元素可能有一组不同的数据对。在（X）HTML文档中是否有表示用户数据的标准方法？

永远不要混合数据和显示。我还认为，您可以轻松地绕过对n个元素的迭代来获得所需的数据。这是你怎么做的

在javascript中创建一个模型（您的数据存储）

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

然后，使用Javascript，您可以使用上述数据在左侧创建下表

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

我创建了一个工作示例。代码中有一个错误，表示未定义showDetails，但这是由于JSFIDLE问题造成的，如果将代码放入HTML页面中，代码将正常工作。此外，确保在顶部使用严格的doctype（以避免跨浏览器的怪癖）

---

我还建议您查看而不是使用框架集。框架集需要多个页面，整个页面都有javascript，这可能是一场维护噩梦。

Nice-所以我想这意味着我将提供很少的编码HTML、少量CSS、大量javascript代码和大量javascript格式的数据。在我的回答中，是的，但我的回答是假设您没有使用服务器端技术。如果您使用的是php、asp.net或j2ee，我的答案可能会有点不同。我的回答唯一的问题是，它不是谷歌蜘蛛友好，但如果你不打算让人搜索谷歌的这个页面，就不应该有问题。我使用C++服务器端，因为数据是通过高度优化的计算密集的过程生成的。因此，一代又一代的随机访问成本高昂。这是私有数据，搜索不需要它。我还应该说我想支持渐进式流媒体-导航表在服务器生成时填充（可能需要10秒）。所以可能不使用纯JS方法。左手边有多少条记录？使用setTimeout，您可以让javascript一次渐进地构建几个区块的列表，或者，您可以使用YUI分页器，这比沿着侧边的大滚动条更好。我认为您低估了javascript的速度。

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