- Mensajes
- 703
- Puntuación de reacción
- 0
Hola compañeros,
Estoy intentando adaptar una web realizada en tablas HTML (es bastante antigua) para que se vea correctamente en smartphones. He usado CSS para la mayoría de las modificaciones, pero tengo la necesidad, cuando se carga la página en smartphones, de eliminar 2 columnas dentro de una tabla y, además, esas mismas columnas cambiarlas de lugar a otra tabla del documento. Lo estoy intentando realizar mediante jQuery pero no lo consigo. A ver si alguien me puede ayudar.
Lo siguiente sería un ejemplo del código de la página web para que se entienda perfectamente lo que busco:
Como podéis ver, en la primera tabla necesito que cuando se carga la página en smartphones no se vean las columnas 1ª y 3ª, las cuales, posteriormente necesito mover a una nueva tabla que solo se debe ver en smartphones.
Con el código que os he mostrado consigo que se eliminen las 2 columnas correctamente de la primera tabla, pero en la nueva creada para smartphones solo se ve la 1ª columna.
¿Cómo puedo hacer que se vean las 2 columnas en la nueva tabla? No veo dónde está el error
Estoy intentando adaptar una web realizada en tablas HTML (es bastante antigua) para que se vea correctamente en smartphones. He usado CSS para la mayoría de las modificaciones, pero tengo la necesidad, cuando se carga la página en smartphones, de eliminar 2 columnas dentro de una tabla y, además, esas mismas columnas cambiarlas de lugar a otra tabla del documento. Lo estoy intentando realizar mediante jQuery pero no lo consigo. A ver si alguien me puede ayudar.
Lo siguiente sería un ejemplo del código de la página web para que se entienda perfectamente lo que busco:
Código:
<html>
<head>...</head>
<body>
<!-- Necesito eliminar columnaIzquierda y columnaDerecha al cargar en smartphones -->
<table>
<tr>
<td id="columnaIzquierda"></td>
<td id="columnaCentro"></td>
<td id="columnaDerecha"></td>
</tr>
</table>
<!-- Nueva tabla que solo debe cargar en smartphones y que muestra las 2 columnas antes eliminadas -->
<table>
<tr>
<td id="columnaIzquierdaMoviles"></td>
<td id="columnaDerechaMoviles"></td>
</tr>
</table>
<script src="http://www.midominio.com/jquery.min.js" ></script>
<script>
if( /android|iphone|ipod|phone|webos|blackberry|bb10|windows\sce|palm|smartphone|iemobile|nokia|symbian|opera|mini/i.test(navigator.userAgent.toLowerCase()) && !/tablet|nexus\s10|mz601|mz604|sch-i800|gt-p|gt-s|sm-t|android 3.0|xoom|playbook|kindle/i.test(navigator.userAgent.toLowerCase()) ) {
$(document).ready(function(){
var htmlcambiado = $("#columnaIzquierda").html();
$("td").remove("#columnaIzquierda");
$("#columnaIzquierdaMoviles").html(htmlcambiado);
var htmlcambiado2 = $("#columnaDerecha").html();
$("td").remove("#columnaDerecha");
$("#columnaDerechaMoviles").html(htmlcambiado2);
});
}
</script>
</body>
</html>Como podéis ver, en la primera tabla necesito que cuando se carga la página en smartphones no se vean las columnas 1ª y 3ª, las cuales, posteriormente necesito mover a una nueva tabla que solo se debe ver en smartphones.
Con el código que os he mostrado consigo que se eliminen las 2 columnas correctamente de la primera tabla, pero en la nueva creada para smartphones solo se ve la 1ª columna.
¿Cómo puedo hacer que se vean las 2 columnas en la nueva tabla? No veo dónde está el error
Última edición:
