30/12/2012, 10:19
|
| | 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> </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> |