1

Estoy tratando de crear un arreglo bidimensional con datos dinamicos. Esos datos son pedidos al usuario a traves de unos inputs. El programa primero te pide el tamaño de la matriz y a partir de eso se generan unos inputs dinamicos con base en el orden que escogiste. El problema es que ya pude generar los inputs pero ahora no se como accesar a cada valor y guardar todo en un arreglo, bidimensional obvio.

Hasta ahora llevo esto:

HTML:

<select id="matriz" >
      <option selected>Ingrese el orden de la matriz</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>

    <div class="" id="mostrarMatriz">

    </div>

    <input type="button" value="Mostrar matriz" id="btnMostrar">

Y el JS:

$("#btnMostrar").hide();

        $('#matriz').change(function(){


            $("#btnMostrar").show();

          var val = $(this).val();
          var innerhtml = '';

          for (var i = 0; i < val; i++) {
            for (var j = 0; j < val; j++) {
                innerhtml += "<input type='text' placeholder='' id='" + (j + 1) + "' name='" + (j + 1) + "' size=5>";

            }
            innerhtml+="<br>";

          }

          var display = $(this).next('#mostrarMatriz');
          display.html(innerhtml);
        });

Alguna idea de como obtener los valores y meterlos en un arreglo? gracias de antemano!

1
  • 1
    Agregar una clase general y añadirlo a los input y luego iteras sobre estos elementos y vas añadiendo a un array.
    – Dev. Joel
    Commented el 19 feb. 2018 a las 2:29

1 respuesta 1

3

Se podría seleccionar los inputs añadiéndoles una clase que los identifique. por ejemplo una clase entrada . Para simular el ejemplo añadí valores de entrada y utilicé una variable temporal para añadir un array dentro de otro

$("#btnMostrar").hide();
// Valor seleccionado del Select
let val = 0;
$('#matriz').change(function(){
  $("#btnMostrar").show();
  val = parseInt($(this).val());
  var innerhtml = '';
  for (var i = 0; i < val; i++) {
    for (var j = 0; j < val; j++) {
        innerhtml += "<input type='text' class='entrada' value='"+(j + i)+1+"' placeholder='' id='" + (j + 1) + "' name='" + (j + 1) + "' size=5>";
    }
    innerhtml+="<br>";
  }
  var display = $(this).next('#mostrarMatriz');
  display.html(innerhtml);
});

$("#btnMostrar").click(function(event) {
	let array = [];
  //Seleccionamos los inputs creados
	let inputs = document.querySelectorAll('.entrada');
	let temp = [];
	for (var i = 0; i < inputs.length; i++) {
		//Añadimos al arreglo temporal para el 2D
		temp.push(inputs[i].value);
		//Si es igual al orden de la matriz
		// Entonces lo añadimos al array principal y
		// reseteamos el temporal
		if(temp.length == val){
			array.push(temp);
			temp= [];
		}
	}
	console.log(array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="matriz" >
  <option selected>Ingrese el orden de la matriz</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<div class="" id="mostrarMatriz">

</div>

<input type="button" value="Mostrar matriz" id="btnMostrar">

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.