Duda en el uso de span por fuera de tr al interior de una tabla

[GUILLHERMOSOFT]

Cordial Saludo

Tengo una pregunta la cual no sé muy bien si tendria que ir en el foro de HTML ó en el de Frameworks JS (JQuery), por lo cual la publicare en ambos.

El punto es, tengo una tabla con dos filas (en una de las filas campos de formulario), de las cuales se pueden agregar réplicas, para lo cual uso un botón cuyo id es "agregar" el cual hace referencia al evento click y por medio de JQuery clono las filas (eso si solo el última par, ya que luego de varias "replicadas" pueden haber muchas) y las agrego en la capa "detalleRemesaAgregar", más al dar click sobre el botón "Agregar" no se me replican las dos filas, más cuando intento hacer esto mismo por fuera de una tabla sin los "<tr>" me funciona perfectamente, mi "sospecha" es en relación a esta misma etiqueta, pues no sé si sea funcional usan la etiqueta "span" por fuera de un "tr" al interior de una tabla, por lo cual me gustaria conocer sus sugerencias y aportes (sin tener que manejar las filas por fuera de mi tabla actual) ver código.

HTML

<table>
<span class="detalleRemesa">

<tr>
<td colspan="2">Documento Identificación Remitente</td>
<td>O.C.</td>
<td>Valor Declarado</td>
</tr>

<tr>
<td colspan="2">
<input class="campos" type="text" name="documentoIdentificacionRemitente[]" id="documentoIdentificacionRemitente" value="" size="9" />
</td>
<td>
<input class="campos" type="text" name="oc[]" id="oc" value="" size="9" />
</td>
<td>
<input class="campos" type="text" name="valorDeclarado[]" id="valorDeclarado" value="" size="9" />
</td>
</tr>
</span>

<span id="detalleRemesaAgregar"></span>

<tr>
<td>
<input type="button" name="agregar" id="agregar" value="Agregar" /><input type="button" name="quitar" id="quitar" value="Quitar" />
</td>
</tr>
</table>



JS (JQuery)

$(document).ready(function(){
$("#agregar").click(function() {
$(".detalleRemesa").last().clone().appendTo("#deta lleRemesaAgregar");
});
});

Quedo atento a sus comentarios y/ó sugerencias.

Muchas gracias.

[IsaBelM]

aparte de las etiquetas tr y td tienes otras etiquetas como thead, tbody y tfoot. cambia el span por, yo que aconsejo, tbody. pero lee primero el articulo

[GUILLHERMOSOFT]

Hola, muchas gracias por tu aporte, de hecho hace un momento usé esta etiqueta y ya se me agregan las nuevas filas, el código quedó así:

<table>
<tbody class="detalleRemesa">

<tr>
<td colspan="2">Documento Identificación Remitente</td>
<td>O.C.</td>
<td>Valor Declarado</td>
</tr>

<tr>
<td colspan="2">
<input class="campos" type="text" name="documentoIdentificacionRemitente[]" id="documentoIdentificacionRemitente" value="" size="9" />
</td>
<td>
<input class="campos" type="text" name="oc[]" id="oc" value="" size="9" />
</td>
<td>
<input class="campos" type="text" name="valorDeclarado[]" id="valorDeclarado" value="" size="9" />
</td>
</tr>
</tbody>

<tbody id="detalleRemesaAgregar"></tbody>

<tr>
<td>
<input type="button" name="agregar" id="agregar" value="Agregar" /><input type="button" name="quitar" id="quitar" value="Quitar" />
</td>
</tr>
</table>

Más el problema ahora es que se me agregan las nuevas filas con sus 4 columnas en una sola columna (como si en esta usara colspan igualado a 4) de las filas originales, de manera que las otras columnas quedan sin campos, deformándose así mi tabla (ver imagen que se visualiza en el enlace).

http://www.uploadgeek.com/share-3D5D_4E3AB8A8.html

Ya intente haciendo esto:

<tr>
<td colspan="4">
<tbody id="detalleRemesaAgregar"></tbody>
</td>
</tr>

Sin embargo el resultado es el mismo.

Por favor si saben una solución para esto agradecería sus aportes.

Muchas gracias.

[IsaBelM]

has de añadirle a detalleRemesaAgregar colspan="4"

aparte

• lee el articulo que te deje tanto el de thead, tbody y tfoot, por que estás cometiendo errores.
• estás duplicando las id al clonar los controles
• no uso jquery, pero me da la sensación que estás clonando también la etiqueta <tbody ....>