05/06/2009, 09:39
|
 | Me alejo de Omelas | | Fecha de Ingreso: mayo-2004 Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años Puntos: 834 | |
| Respuesta: modificar tamaño de celdas de una tabla
Fijate si te sirve este ejemplo. El secreto está en la propiedad contentEditable:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Generador de Tabla</title>
<style>
body{font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; color:#565942; font-size:9px;}
input{font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; color:#565942; font-size:9px; border:1px solid #000}
#f1,#c1{border:none}
h1{font-size:15px;}
.res{ font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#FFF; font-size:10px; background-color:#F19409}
.nor{ font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; color:#565942; font-size:10px;}
</style>
<script>
function $(x){return document.getElementById(x);}
function crearTabla(){
var agregar='';
if(!parseInt($('c').value) || !parseInt($('f').value)){
alert('Por favor indique la cantidad de filas y columnas');
return;
}
var t='<table border="0" width="470" cellpadding="2" cellspacing="1" bgcolor="#EAD600">';
for(var i=0,l=$('f').value;i<l;i++){
t+='<tr>';
for(var j=0,m=$('c').value;j<m;j++){
if(($('f1').checked && i==0) || ($('c1').checked && j==0))agregar=' class="res"';else agregar=' class="nor"';
t+='<td bgcolor="#F2E4C7"'+agregar+'><div contenteditable="true"> </div></td>';
}
t+='</tr>';
}
t+='</table>';
$('contenedor').innerHTML=t;
if(window.opera)$('contenedor').contentEditable=true;
$('info').innerHTML='(Haga click sobre las celdas para editarlas)';
}
</script>
</head>
<body>
<h1>Ingresar Características de la Tabla</h1>
<form id="form1" name="form1" method="post" action="">
Cantidad de Columnas:
<input name="c" type="text" id="c" size="5" />
Cantidad de Filas:
<input name="f" type="text" id="f" size="5" />
Resaltar Primera Fila
<input name="f1" type="checkbox" id="f1" value="checkbox" />
Resaltar Primera Columna
<input name="c1" type="checkbox" id="c1" value="checkbox" />
<input type="button" name="Submit" value="Generar Tabla" onclick="crearTabla()" />
</form>
<h1 id="info" style="margin-top:10px"></h1>
<div id="contenedor" style="margin-top:10px; margin-bottom:10px"></div>
</body>
</html>
EDITO: creí que te referías a que el contenido modifique el tamaño de las celdas. No leí lo del mouse (eso es bastante más complejo).
Última edición por Panino5001; 05/06/2009 a las 10:01 |