 
			
				30/12/2012, 10:19
			
			
			     |  
      |    |    |    Fecha de Ingreso: diciembre-2012  Ubicación: Castelón  
						Mensajes: 8
					  Antigüedad: 12 años, 10 meses Puntos: 0     |        |  
  |      Respuesta: Tablas dinámicas con javascript        ]YA LO HE SOLUCIONADO, DEJO EL CÓDIGO POR SI ES ÚTIL PARA ALGUIEN         
<HTML>    
<HEAD>    
<TITLE>tablas dinámicas</TITLE>    
</HEAD>    
<BODY>  
<script language="javascript"> 
 function crear(){ 
 var col = document.getElementById("cols").value; 
 var filas = document.getElementById("rows").value; 
 var tabla="<table id='tabla' border=’1'>"; 
 for(i=0;i<filas;i++){ 
 tabla+="<tr>"; 
 for(j=0;j<col;j++){ 
 tabla+="<td>   </td>"; 
 } 
 tabla+="</tr>"; 
 } 
 tabla+="</table>"; 
 document.getElementById("editor").innerHTML+=tabla  ;     
 } 
 function crear2(){ 
 document.getElementById("editor").innerHTML=""; 
 } 
 </script> 
<script language="javascript"> 
 function crear3(){ 
 var col = document.getElementById("cols").value; 
 var filas = document.getElementById("rows").value; 
 var tabla="<table border=’1'>"; 
 for(i=0;i<filas;i++){ 
 tabla+="<tr>"; 
 for(j=0;j<col;j++){ 
 tabla+="<td>   </td>"; 
 } 
 tabla+="</tr>"; 
 } 
 tabla+="</table>"; 
 document.getElementById("editor").innerHTML+=tabla  ;     
 } 
 function crear4(){ 
 document.getElementById("editor").innerHTML=""; 
 } 
 </script>     
<script language="javascript"> 
function agregarLinea() { 
	var tabla = document.getElementById("tabla").getElementsByTagN  ame("TBODY")[0]; 
	var tr = document.createElement("TR"); 
	var td = document.createElement("TD"); 
	td.appendChild(document.createTextNode("")); 
	tr.appendChild(td); 
	tabla.appendChild(tr);   
	var tlin = tabla.rows.length; 
	document.forms.f.tlin.value = tlin; 
} 
function agregarCelda() { 
	var tlin = document.getElementById("tabla").rows.length; 
	var lin = document.getElementById("tabla").rows[tlin-1];   
	var td = document.createElement("TD"); 
	td.appendChild(document.createTextNode("" + parseInt(Math.random()*0))); 
	lin.appendChild(td); 
} 
function borrarLinea() { 
	var tabla = document.getElementById("tabla").getElementsByTagN  ame("TBODY")[0]; 
	var tlin = tabla.rows.length; 
	var lin = tabla.rows[tlin-1];   
	tabla.removeChild(lin); 
	document.forms.f.tlin.value = tabla.rows.length; 
} 
function borrarCelda() { 
	var tabla = document.getElementById("tabla").getElementsByTagN  ame("TBODY")[0]; 
	var tlin = tabla.rows.length; 
	var lin = tabla.rows[tlin-1]; 
	var tcol = lin.cells.length; 
	var td;   
	td = document.getElementById("tabla").rows[tlin-1].cells[tcol-1]; 
	lin.removeChild(td); 
	tcol--;   
	if ( tcol == 0 ) { 
		tabla.removeChild(lin); 
		document.forms.f.tlin.value = tabla.rows.length; 
		return; 
	} 
} 
</script>           
 <script>   
function mostrardiv() {   
div = document.getElementById('flotante');   
div.style.display = '';   
}   
function cerrar() {   
div = document.getElementById('flotante');   
div.style.display='none';   
} 
</script>   
 <script>   
function mostrardiv2() {   
div = document.getElementById('flotante2');   
div.style.display = '';   
}   
function cerrar2() {   
div = document.getElementById('flotante2');   
div.style.display='none';   
} 
</script>       
 <style type="text/css">   
body { 
background-color:#ffffff; 
font-family: Palatino Linotype; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
font-size: 100%; 
line-height: 15px; 
font-size-adjust: none; 
font-stretch: normal; 
} 
#editor{ 
background-color: #ffffff; 
width:80%; 
height:200px; 
border: 1px solid #666666; 
font-family: Palatino Linotype; 
font-size: 100%; 
text-align:left; 
color: #000000; 
padding-left:1%; 
padding-top:1%; 
border-style: double; 
border-color: #666666; 
overflow: scroll; 
scrollbar-face-color: #c7c7c7; 
scrollbar-highlight-color: #f4f4f4; 
scrollbar-shadow-color: #dfdfdf; 
scrollbar-3dlight-color: #dfdfdf; 
scrollbar-arrow-color: #dfdfdf; 
scrollbar-darkshadow-color: #dfdfdf; 
border-bottom: 1px double #666666"  
} 
#copiar{ 
width:85%; 
margin-left:15% 
} 
.table{ 
border:1px solid #000000; 
width:300px; 
}   
.border{ 
border:1px solid #dbdfe6;} 
</style> 
</head>   
<body>   
<div id="copiar"> 
 <form id="f"> 
<center> 
<input type="button" id="b1" value="Agregar linea" onclick="agregarLinea();"> 
<input type="button" id="b2" value="Borrar linea" onclick="borrarLinea();"> 
<br> 
<input type="button" id="b3" value="Agregar celda" onclick="agregarCelda();"> 
<input type="button" id="b4" value="Borrar celda" onclick="borrarCelda();">     
<input type="button" title="Tablas1" onclick="javascript:mostrardiv()" value="Tablas1" > 
<input type="button" title="Tablas2" onclick="javascript:mostrardiv2()" value="Tablas2" > 
<input type="button" title="borrar tabla" onclick="crear2()" value="Borrar tabla">    
<div id="flotante" style="display: none;"> 
<table style="width:100px; border:1px solid #dbdfe6;"> 
<tr><td colspan="2" rowspan="1" style="background-color:#000000; font-family: Arial; font-size:12px; color:#ffffff; text-align:center;font-weight: bold;">Insertar tabla</td></tr> 
<tr><td><input type="text" size="1" id="cols" /></td><td style="font-family: Arial; font-size:12px; color:#000000; text-align:center;font-weight: normal;"> Columnas</td></tr> 
<tr><td><input type="text" size="1" id="rows" /> </td><td style="font-family: Arial; font-size:12px; color:#000000; text-align:center;font-weight: normal;">Filas</td></tr> 
<tr><td><input type="button" id="enviar" value="Crear" onclick="crear(); javascript:cerrar();"/></td><td></td></tr></table>     
 </div>    
<div id="flotante2" style="display: none;"> 
<table style="width:100px; border:1px solid #dbdfe6;"> 
<tr><td colspan="2" rowspan="1" style="background-color:#000000; font-family: Arial; font-size:12px; color:#ffffff; text-align:center;font-weight: bold;">Insertar tabla</td></tr> 
<tr><td><input type="text" size="1" id="cols" /></td><td style="font-family: Arial; font-size:12px; color:#000000; text-align:center;font-weight: normal;"> Columnas</td></tr> 
<tr><td><input type="text" size="1" id="rows" /> </td><td style="font-family: Arial; font-size:12px; color:#000000; text-align:center;font-weight: normal;">Filas</td></tr> 
<tr><td><input type="button" id="enviar" value="Crear" onclick="crear3(); javascript:cerrar2();"/></td><td></td></tr></table>   
  </div>    
  </div>   
  <center>   
      <div id="editor" contenteditable="true" name="content"   type="text">  mmm 
  </div>   
  <br>   
</form> 
</center> 
</BODY>    
</HTML>           |