Problema con colspan

pepepercebe · #1 (**permalink**) 23/08/2009, 13:11

Hola creo tablas mediante el DOM de Javascript y por ejemplo defino una tabla de 4 colmnas y hay una de las filas que quiero que solo sea 1 columna en lugar de 4. Yo eso en html lo hacia con colspan = 3 y se juntaban las 4 columnas en una.

Al hacer lo mismo en javascript, me las junta pero me pone los bordes de las 4 columnas a la derecha de la fila y queda esteticamente mal. Voy a intentar hacerlo graficamente:

/ columna / sin / el / colspan /
/ columna con el colspan=3 ////
/ columna / sin / el / colspan /

Como podeis ver en el cutre ejemplo que he hecho si que se me consigue la fila 2 en una pero no me junta las 4 columnas en una, sino que hace una con el tamaño de las 4 y las otras 3 las deja al final y esteticamente es muy feo.

Uso este codigo:

Código:

oTbody.rows[0].cells[0].appendChild(document.createTextNode("Modelos MC"));
		oTbody.rows[0].cells[0].setAttribute('id','cabeceraModelos');
		oTbody.rows[0].cells[0].colSpan =20;

Sabeis como conseguir esto?

Adler · #2 (**permalink**) 23/08/2009, 14:48

Hola

Prueba con esto

Código javascript:

Ver original<html>
<head>
<title>Crear filas</title>
<script type="text/javascript">
var indiceFila = 0;
function NuevaFila() {
myNewRow = document.getElementById("tabla").insertRow(-1);
 
    if (indiceFila == 1) {
        myNewCell=myNewRow.insertCell(-1);
        myNewCell.colSpan="4";
        var elemento = document.createElement("INPUT");
        elemento.setAttribute("type","text");
        elemento.setAttribute("size","8");
        elemento.setAttribute("maxlength","15");
        elemento.setAttribute("name","codigo_" + indiceFila);
        elemento.setAttribute("id","codigo_" + indiceFila);
        myNewCell.appendChild(elemento);
 
    }else {
        myNewCell=myNewRow.insertCell(-1);
        var elemento = document.createElement("INPUT");
        elemento.setAttribute("type","text");
        elemento.setAttribute("size","8");
        elemento.setAttribute("maxlength","15");
        elemento.setAttribute("name","codigo_" + indiceFila);
        elemento.setAttribute("id","codigo_" + indiceFila);
        myNewCell.appendChild(elemento);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento2 = document.createElement("INPUT");
        elemento2.setAttribute("type","text");
        elemento2.setAttribute("size","25");
        elemento2.setAttribute("maxlength","40");
        elemento2.setAttribute("name","nombre_" + indiceFila);
        elemento2.setAttribute("id","nombre_" + indiceFila);
        myNewCell.appendChild(elemento2);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento3 = document.createElement("INPUT");
        elemento3.setAttribute("type","text");
        elemento3.setAttribute("size","10");
        elemento3.setAttribute("maxlength","20");
        elemento3.setAttribute("name","unidad_" + indiceFila);
        elemento3.setAttribute("id","unidad_" + indiceFila);
        myNewCell.appendChild(elemento3);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento4 = document.createElement("INPUT");
        elemento4.setAttribute("type","text");
        elemento4.setAttribute("size","10");
        elemento4.setAttribute("maxlength","20");
        elemento4.setAttribute("name","cantidad_" + indiceFila);
        elemento4.setAttribute("id","cantidad_" + indiceFila);
        myNewCell.appendChild(elemento4);
    }
 
indiceFila++;
}  
</script>
</head>
<body>
<a href="javascript:void(0);" onClick="NuevaFila()">Adicionar Fila</a>
<br />
<table border="1px" id="tabla">
<tr>
<td>CÓDIGO</td><td>NOMBRE</td><td>UNIDAD</td><td>CANTIDAD</td>
</tr>
</table>
</body>

Suerte

pepepercebe · #3 (**permalink**) 28/08/2009, 16:07

Adler gracias por la respuesta, aun no he podido intentar adaptar tu codigo al mio para probarlo, aunque no se si es eso lo que necesito.
Yo parto de una tabla que ya esta hecha y se trata de modificar una linea de esa tabla que ya esta formada con 4 columnas y que pase a tener solo uno

Yo creo que lo que me indicas es para añadir una fila y en mi caso ya tengo la fila creada.

elmaspicudo · #4 (**permalink**) 10/09/2009, 09:32

De antemano gracias Adler me sirvio mucho gracias, pepepercebe prueva con esto a mi me sirvio
myNewCell=myNewRow.insertCell(-1);
myNewCell.colSpan="2";
myNewCell.innerHTML="<td ><div align='right'>Hola</div></td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.colSpan="6";
myNewCell.innerHTML="<td><label><textarea name='Hola' cols='100' rows='4' id='inmueble'></textarea></label></td>";

y asi haces una fila de 8 columnas