Saludos estimados,
Requiero su ayuda para la realización de una especie de tabla que me servirá para realizar un método de ponderación. Lo primero que requiero es que el usuario indique la cantidad de variables que tendrá para el metodo de ponderación, es decir, si dice previamente 2 variables, se mostrará una tabla de 2x2, si dice 6 variables, seria una tabla 6x6 o hasta un máximo de 10 variables a manejar (Tabla 10x10), además estás variables seran los titulos de cada fila y columna consecutivamente, como ven en el siguiente ejemplo:
1. Introducir Variables
Cuantas variables? _3_
y luego automáticamente se despliegue la tabla en base a sus variables a ponderar:
2. Tabla de Ponderación
variable 1 variable 2 variable 3
variable 1 x 1 2
variable 2 2 X 1
variable 3 0 2 X
Cada una de las variables a ponderar deberá desplegarme un combobox con los valores (0,1,2) y evidentemente las variables con el mismo nombre no se podrán ponderar (Variable 1 con Variable 1, Variable 2 con Variable 2, Variable 2 con Variable 3) y cada variable debe tener su nombre en la tabla
El punto es que no tengo mucha experiencia en programación y he recabado una que otra información por estos foros y en internet en general y he encontrado lo siguiente que he medio encadenado para darme una idea:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
<script src="//d3js.org/d3.v3.min.js"></script>
<title>RIME SOFT</title>
<script type="text/javascript">
function crearCampos(cantidad){
var div = document.getElementById("campos_dinamicos");
while(div.firstChild)div.removeChild(div.firstChil d); // remover elementos;
for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
var salto = document.createElement("P");
var input = document.createElement("input");
var text = document.createTextNode("Campo Dinamico " + i + ": ");
input.setAttribute("name", "campo" + i);
input.setAttribute("size", "12");
input.className = "input";
salto.appendChild(text);
salto.appendChild(input);
div.appendChild(salto);
}
}
//<![CDATA[
function crea_tabla(){
var n= 3;//filas
var n2= 3;//columnas
var i=0;
var tblBody = document.getElementById("MiTabla").getElementsByTa gName("tbody")[0]; // identifico el elemento donde hacer el appendChild de las filas
for (var f=0;f<n;f++) {
var fila = document.createElement("tr"); // creo una fila
for (var c=0;c<n2;c++) {
var celda = document.createElement("td"); // creo una celda
i++; // usamos i para crear id's únicos para los input si los requiere
var crearInput;
crearInput = document.createElement('input'); //creo un input
crearInput.type ="text"; // generando atributos del input
crearInput.name ="campo"; // generando atributos del input
crearInput.id ="campo_"+i; // generando atributos del input
celda.appendChild(crearInput); // meto dentro de la celda el input
fila.appendChild(celda); // meto la celda(que ya tiene el input dentro) dentro de la fila
}
tblBody.appendChild(fila); // agrego las filas al tbody
}
}
//]]>
</script>
</head>
<form>
¿Cantidad de Variables? <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos(this.value);" />
<input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos(this.form.cantidad.value);" />
<div id="campos_dinamicos"></div>
</form>
<body onload="crea_tabla()">
<table id="MiTabla">
<tbody></tbody>
</table>
</body>
</html>
De verdad los que puedan ayudarme u orientarme en el mismo les estaré eternamente agradecidos.
Saludos!
