Question

我需要创建多个保存数据的表。所有表都包含相同的字段，但每个表的数据都是使用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，那么它可以解决问题，但我还没弄清楚如何实现这一点。

有什么建议吗？谢谢！

Answer 1

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

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

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

Answer 2

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

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

如果要在其他类型的表之后添加新表，可以这样做：

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

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

代替.append(title)，你可以做任何你需要的事情来覆盖新表中的数据。

使用Javascript创建可重复的HTML表

2 个答案: