Crear una tabla HTML repetible con Javascript

Necesito crear varias tablas que contengan datos. Todas las tablas consistirán en los mismos campos, pero los datos de cada tabla se analizan desde un archivo XML utilizando jQuery y Javascript. Actualmente, mi configuración es crear mi tabla formateada en HTML con el campo 'id' que identifica las áreas donde se colocarán los datos XML. Por ejemplo...

HTML principal:

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

HTML de la plantilla:

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

Javascript para cargar la plantilla:

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

Esto toma el elemento con el ID 'sectionTable' en un archivo HTML (en este caso template.html) y lo inserta en el cuerpo del elemento con el ID 'top', que es el cuerpo principal de la página html.

Javascript para poner datos XML en la tabla: Puedo analizar y almacenar bien los datos XML, que luego se almacenan en una variable. Luego agrego estos datos a la etiqueta de identificación html apropiada...

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

...

$(#information).append(title);

HTML resultante:

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

El problema con este enfoque es que cuando recorro varias secciones del XML y uso esta técnica, no crea una nueva tabla HTML, sino que sobrescribe los datos existentes porque uso las mismas ID.

Sé que al usar objetos DOM puedo solucionar este problema, pero mi problema es que, aunque este es un ejemplo simple, mis tablas son muy complejas con múltiples niveles, estilos, etc. Serían muchos objetos para crear y anidar. entre sí correctamente, lo que sería muy difícil de cambiar para otro usuario en el futuro (lo cual es muy probable). Usar el método de plantilla es muy fácil de rastrear a dónde va todo. Si hubiera una forma de colocar ID únicos en el HTML según el índice de la iteración a través de los datos XML, resolvería el problema, pero no he descubierto cómo lograrlo.

¿Alguna sugerencia? Gracias!

preguntado el 12 de junio de 12 a las 21:06

¿cada nivel del xml tiene una identificación incremental asignada, como en los primeros datos tiene la identificación 1 y así sucesivamente? Sería útil saber un poco más sobre la estructura y cuántos elementos de datos están relacionados entre sí, etc. -

Los datos XML en sí no tienen números incrementales, sin embargo, la función jQuery .each devuelve un índice para cada iteración del ciclo, así que tengo este índice disponible. -

2 Respuestas

Intente cambiar su id="información" a una clase en su lugar, luego itere a través de cada elemento de la clase "información".

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

El uso de una identificación solo consultará el primer elemento de esa identificación. No lo he probado, pero pruébalo.

Respondido el 12 de junio de 12 a las 21:06

Nunca debe tener dos elementos con la misma ID en un documento: la especificación HTML dice que solo puede haber uno. Utilice clases en su lugar, como sugirió LCIII. Puede recuperar el primer y el último elemento con un nombre de clase particular con las funciones .first() y .last() de jQuery:

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

Si desea agregar una nueva tabla después de las demás de su tipo, puede hacerlo así:

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

(En inglés: clone la primera tabla de información, insértela después de la última tabla de información y agréguele el título. De acuerdo, no especifica la tabla, pero si cada .information es una tabla...)

En lugar de .append(title), puede hacer lo que necesite para sobrescribir los datos en la nueva tabla.

Respondido el 13 de junio de 12 a las 02:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.