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.

[maycolalvarez]

POST REPETIDO: http://www.forosdelweb.com/f4/duda-u...-tabla-934256/ favor no duplicar mensajes

creo que ningún DTD admitirá eso, y por lo tanto es probable que falle en determinados navegadores, ¿porque mejor no le asignas una clase a la fila?, con jQuery puedes gestionarlas así

<tr class="clase1 clase2" ...

[GUILLHERMOSOFT]

Hola, muchas gracias por tu aporte, hace un momento usé la etiqueta tbody (y no tuve que modificar nada de JS y funciona en IE, en Firefox y Google Chrome) 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.