使用Javascript創建可重複的HTML表格

我需要創建多個包含數據的表格。所有的表都由相同的字段組成，但每個表的數據都是使用jQuery和Javascript從XML文件中解析出來的。目前我的設置是使用'id'字段在HTML中創建我的格式化表格，標識XML數據將放置的區域。例如...使用Javascript創建可重複的HTML表格

主要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');

這需要與ID「sectionTable」在一個HTML文件中的元素（在此情況下template.html）並將其插入到所述元件的主體與ID「頂部」，這是在主體html頁面。

Javascript功能來把XML數據轉換成表格： 我能夠分析和存儲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，它可以解決問題，但我還沒有想出如何實現這一點。

有什麼建議嗎？謝謝！

來源

2012-06-12 milbert

xml的每個級別都有一個增量ID分配給它，如在第一個數據中有ID 1等等。瞭解更多關於結構和數據元素相互之間的相關性等將是有用的。 –

XML數據本身沒有增量數字，但是jQuery .each函數爲每個迭代返回一個索引循環，所以我有這個索引可用。 – milbert

您不應該在文檔中擁有兩個具有相同ID的元素 - HTML規範說明只能有一個。正如LCIII所建議的那樣，改用類。您可以使用jQuery的.first（）和.c檢索具有特定類名的第一個和最後一個元素。最後（）函數：

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

如果你想同類型的其他後添加一個新的表，你可以做這樣的：

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

（英文：克隆第一信息表，將它插入最後一個信息表之後，並將標題附加到它上面。當然，它沒有指定表格，但是如果每個.information都是一個表格......）

代替.append(title)，您可以執行任何操作您需要覆蓋新表中的數據。

來源

2012-06-13 01:08:39 Brilliand

嘗試將您的id =「information」更改爲類，然後遍歷類「information」中的每個元素。

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

使用id只會查詢該id的第一個元素。沒有測試過這個，但放棄了它。

來源

2012-06-12 20:18:19 LCIII

使用Javascript創建可重複的HTML表格

回答

相關問題