4

estoy haciendo un programa que me genera tablas de forma dinámica , el problema es que no soy capaz de genera la ubicación en la que están, tipo coordenadas. ¿Como lo puedo hacer? He intentado varias cosas pero nada me funciona, por favor help!

<html>
<head>
<script language="javascript">
function crear(){
var col = document.getElementById("cols").value;
var filas = document.getElementById("rows").value;
var tabla="<table border=\"0\">";
for(i=0;i<filas;i++){
tabla+="<tr>";
for(j=0;j<col;j++){ 
tabla+="<td>"+"<input type=\"text\" size=\"1\">"+ "</td>";
}
tabla+="</tr>";
}
tabla+="</table>";
document.getElementById("resultado").innerHTML=tabla;
}
function crear2(){
document.getElementById("resultado").innerHTML="";
}

</script>
</head>
<body>
<form>
<input type="text" id="cols" /> Columnas <br />
<input type="text" id="rows" /> Filas <br />
<input type="button" id="enviar" value="crear tabla" onclick="crear()"/>
<input type="button" id="limpiar" value="Limpiar" onclick="crear2()"/>
</form>
<div id="resultado" >
</div>
</body>
</html>

ACÁ ESTA LA IMAGEN PARA QUE QUEDE MÁS CLARO

1 respuesta 1

5

Para el número de fila, solo tienes que crear una celda adicional en tu tabla que contengan el índice actual en el loop.

Y en el caso del número de columna debes crear una fila al principio, usar un for para crear las celdas de cada columna indicando el indice actual y dejar una celda vacía al inicio.

function crear(){
    var col = document.getElementById("cols").value;
    var filas = document.getElementById("rows").value;
    var tabla="<table border=\"0\">";
    
    tabla+="<tr><td></td>";
    for(j=0;j<col;j++){ 
        tabla+="<td>"+(j+1)+ "</td>";
    }
    tabla+="</tr>";
    
    for(i=0;i<filas;i++){
        tabla+="<tr>";
        tabla+="<td>"+(i+1)+ "</td>";
        for(j=0;j<col;j++){ 
            tabla+="<td>"+"<input type=\"text\" size=\"1\">"+ "</td>";
        }
        tabla+="</tr>";
    }
    tabla+="</table>";
    document.getElementById("resultado").innerHTML=tabla;
}

function crear2() {
    document.getElementById("resultado").innerHTML="";
}
<form>
    <input type="text" id="cols" /> Columnas <br />
    <input type="text" id="rows" /> Filas <br />
    <input type="button" id="enviar" value="crear tabla" onclick="crear()"/>
    <input type="button" id="limpiar" value="Limpiar" onclick="crear2()"/>
</form>
<div id="resultado"></div>

4
  • Gracias!!, nunca imagine que había que crear otro ciclo :( .
    – user101774
    Commented el 29 sept. 2018 a las 4:23
  • Igual sabes ¿Como después tomar esos valores? o sea genero mi tabla pero después no se como capturar los valores que escribo :c, como hago un innerHTML a un div, no se como sacar la tabla con los valores.
    – user101774
    Commented el 29 sept. 2018 a las 4:52
  • Debes meter la tabla dentro de una etiqueta form y a cada input agregarle el atributo name. tabla+="<td>"+"<input type=\"text\" size=\"1\" name=\"celda["+i+"]["+j+"]\">"+ "</td>"; Si tienes más dudas para obtener los datos, deberías crear una nueva pregunta.
    – RockoDev
    Commented el 29 sept. 2018 a las 16:48
  • No entendí muy bien para obtener los datos, podrías mostrar un ejemplo'?
    – kef
    Commented el 5 may. 2019 a las 22:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.