Create repeatable HTML table with Javascript

Question

I need to create multiple tables that hold data. All of the tables will consist of the same fields, but the data for each table is parsed from an XML file using jQuery and Javascript. Currently my setup is to create my formatted table in HTML with the 'id' field identifying the areas where the XML data will be placed. For example...

Main HTML:

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

Template HTML:

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

Javascript to load template:

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

This takes the element with the ID 'sectionTable' in an HTML file (in this case template.html) and inserts it into the body of the element with ID 'top', which is the main body of the html page.

Javascript to put XML data into table: I am able to parse and store the XML data fine, which is then stored to a variable. I then append this data to the appropriate html ID tag...

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

...

$(#information).append(title);

Resulting HTML:

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

The problem with this approach is that when I loop through multiple sections of the XML and use this technique it does not create a new HTML table, instead it overwrites the existing data because I use the same IDs.

I know that by using DOM objects I can get around this issue, but my problem is that although this is a simple example, my tables are very complex with multiple levels, styling, etc. This would be a lot of objects to create and nest within each other properly which would be very hard for another user to change in the future (which is very likely). Using the template method is very easy to track where everything goes. If there was a way to place unique IDs in the HTML based on the index of the iteration through the XML data, it would solve the problem but I have not figured out how to accomplish this.

Any suggestions? Thanks!

does each level of the xml have an incremental ID assigned to it, as in first data has ID 1 and so on. It would be useful to know a bit more about the structure and how many elements of data are related to each other etc. — Philip Bevan
– Philip Bevan, Commented Jun 12, 2012 at 20:17
The XML data itself does not have incremental numbers, however the jQuery .each function returns an index for each iteration of the loop, so I have this index available. — milbert
– milbert, Commented Jun 12, 2012 at 20:45

LCIII · Accepted Answer · 2012-06-12 20:18:19Z

2

Try changing your id="information" to a class instead, then iterate through each element of class "information".

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

Using an id will only query the first element of that id. Haven't tested this, but give it a go.

answered Jun 12, 2012 at 20:18

LCIII

3,8045 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brilliand · Accepted Answer · 2012-06-13 01:08:39Z

You should never have two elements with the same ID in a document - the HTML spec says that there can only be one. Use classes instead, as LCIII suggested. You can retrieve the first and last elements with a particular classname with jQuery's .first() and .last() functions:

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

If you want to add a new table after the others of its kind, you can do it like this:

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

(In English: Clone the first information table, insert it after the last information table, and append the title to it. Granted, it doesn't specify table, but if every .information is a table...)

In place of .append(title), you can do whatever you need to to overwrite the data in the new table.

Collectives™ on Stack Overflow

Create repeatable HTML table with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related