3

我需要创建多个保存数据的表。所有表都包含相同的字段，但每个表的数据是使用 jQuery 和 Javascript 从 XML 文件中解析的。目前我的设置是在 HTML 中创建我的格式化表格，其中 'id' 字段标识将放置 XML 数据的区域。例如...

主要HTML：

<body id="top">
</body>

模板 HTML：

<table id="sectionTable" border="1" cellpadding="10" cellspacing="1" width="100%">
    <tr><td id="information"></td></tr>
</table>

加载模板的 Javascript：

$('#top').load('template.html #sectionTable');

这会在 HTML 文件（在本例中为 template.html）中获取 ID 为“sectionTable”的元素，并将其插入到 ID 为“top”的元素的主体中，该元素是 html 页面的主体。

将 XML 数据放入表中的 Javascript： 我能够很好地解析和存储 XML 数据，然后将其存储到一个变量中。然后我将此数据附加到适当的 html ID 标记...

var title = <from XML>; //Lets say in this case title="My Stack Title"

...

$(#information).append(title);

生成的 HTML：

<table id="sectionTable" border="1" cellpadding="10" cellspacing="1" width="100%">
    <tr>
       <td id="information">My Stack Title</td>
    </tr>
</table>

这种方法的问题在于，当我遍历 XML 的多个部分并使用这种技术时，它不会创建新的 HTML 表，而是会覆盖现有数据，因为我使用相同的 ID。

我知道通过使用 DOM 对象我可以解决这个问题，但我的问题是，虽然这是一个简单的例子，但我的表非常复杂，有多个级别、样式等。这将是很多要创建和嵌套的对象彼此之间的正确性，这对于另一个用户将来很难改变（这很可能）。使用模板方法很容易跟踪所有内容的去向。如果有一种方法可以根据通过 XML 数据的迭代索引在 HTML 中放置唯一 ID，它会解决问题，但我还没有想出如何做到这一点。

有什么建议么？谢谢！

4

2 回答 2

2

尝试将您的 id="information" 改为一个类，然后遍历类“信息”的每个元素。

$('.information').each(function(n,c){
 $(this).append(title);
})

使用 id 只会查询该 id 的第一个元素。没有测试过这个，但试一试。

于 2012-06-12T20:18:19.010 回答
1

你永远不应该在一个文档中有两个具有相同 ID 的元素——HTML 规范说只能有一个。正如 LCIII 建议的那样，改用类。您可以使用 jQuery 的 .first() 和 .last() 函数检索具有特定类名的第一个和最后一个元素：

$('.information').last().append(title);

如果你想在其他同类表之后添加一个新表，你可以这样做：

$('.information').first().clone().insertAfter($('.information').last()).append(title);

（英文：克隆第一个信息表，在最后一个信息表之后插入，并附加标题。当然，它没有指定表，但是如果每个 .information 都是一个表......）

代替.append(title)，您可以执行任何您需要的操作来覆盖新表中的数据。

于 2012-06-13T01:08:39.807 回答