Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/12/2012, 10:19
lavallelnostrepoble
 
Fecha de Ingreso: diciembre-2012
Ubicación: Castelón
Mensajes: 8
Antigüedad: 11 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> &nbsp; </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> &nbsp; </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>