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

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.

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

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

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

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?

我应该如何在导航表HTML中表示详细数据？我应该编写自己的元素标记名吗？我应该使用未显示的额外列吗？或者是其他东西？数据通常是名称 - 值对 - 名称和值都可以是文本。每个元素可以具有不同的数据对集合。是否有标准方法在（X）HTML文档中表示用户数据？

1 个解决方案

#1

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.

永远不会永远混合数据和显示。我还认为您可以轻松绕过迭代n个元素来获取所需的数据。这是你如何做到的。

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

在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

然后，使用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>

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

我在这里创建了一个工作示例。该代码中存在一个错误，即showDetails未定义，但这是由于jsfiddle问题，如果放入HTML页面，代码将起作用。另外，请务必在顶部使用严格的doctype（以避免跨浏览器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.

我也建议你看一下YUI 2的布局管理器，而不是使用框架集。框架集需要多个页面，其中javascript全部存在，并且可能成为维护中的噩梦。

#1