Buenos días
Tengo este código para tablas dinámicas:
<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 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 agrega_celda(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("columna 1"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("columna 2"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
</script>
<script>
function mostrardiv() {
div = document.getElementById('flotante');
div.style.display = '';
}
function cerrar() {
div = document.getElementById('flotante');
div.style.display='none';
}
</script>
<script type="text/javascript">
function addTable() {
var t = document.createElement("table");
tb = document.createElement("tbody")
t.setAttribute("border","1")
var tr = document.createElement("tr");
var td ;
td = document.createElement("td");
td.style.border = "1px solid #666666";
td.style.width = "50px";
tr.appendChild(td);
td = document.createElement("td");
td.style.border = "1px solid #666666";
td.style.width = "50px";
tr.appendChild(td);
tb.appendChild(tr);
t.appendChild(tb);
document.getElementById("editor").appendChild(t);
}
</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">
<input type="button" title="Agregar fila" onclick="javascript
:agrega_celda('editor')" value="Agregar fila">
<input type="button" title="Tablas" onclick="javascript
:mostrardiv()" value="Tablas" >
<input type="button" title="borrar tabla" onclick="crear2()" value="Borrar tabla">
<input type="button" title="Tablas" onclick="addTable()" value="Tablas2" >
<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>
<br>
<br>
</div>
<center>
<div id="editor" contenteditable="true" name="content" type="text"> </div>
<br>
</form>
</BODY>
</HTML>
Funciona bien pero me gustaría conseguir cambiar algunos matices:
1- Me gustaría combinar tabla con tabla2, me explico al clicar en tabla me deja escoger el número de columnas y celdas, pero me borra todo lo que hay en el div editable. Si escojo tabla2 no me borra lo que hay en el div editavle pero no me deja escoger el número de filas y columnas. Querria, pues escoger el número de filas y columnas y que no me borrara el contenido del div.
2- Agregar filas funciona pero me gustaría que añadiera las columnas de acuerdo con las que hay en la tabla y no las dos que por defecto introduce siempre.
Gracias