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:\[code\] <body id="top"> </body>\[/code\]Template HTML:\[code\] <table id="sectionTable" border="1" cellpadding="10" cellspacing="1" width="100%"> <tr><td id="information"></td></tr> </table>\[/code\]Javascript to load template:\[code\] $('#top').load('template.html #sectionTable');\[/code\]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...\[code\] var title = <from XML>; //Lets say in this case title="My Stack Title"\[/code\]...\[code\] $(#information).append(title);\[/code\]Resulting HTML:\[code\] <table id="sectionTable" border="1" cellpadding="10" cellspacing="1" width="100%"> <tr><td id="information">My Stack Title</td></tr> </table>\[/code\]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!
Create repeatable HTML table with Javascript
- Thread starter Bakuda
- Start date