1

Estoy realizando un ejercicio en el que tengo que introducir datos a una tabla usando cajas de texto, luego al pulsar un botón me indica cuántas filas fueron agregadas.

Por último, y es la parte en la que me falla, debo indicar de la columna 1 (AULA) cuántos valores corresponden a EJ0, cuantos valores a EJ1, EJ2, EJ3, EJ4...

Ejemplo del ejercicio después de insertar algunos datos:

Captura de pantalla de un ejemplo del ejercicio

Lo que necesito es, básicamente, contabilizar los valores de la columna con id="aula" y que me devuelva cuantos valores hay con EJ1, cuantos con Ej2, etc...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>tabla HTML con JavaScript</title>
    <script src="crearTabla.js"></script>

  </head>
<body>
<br><input type="text" name="caja[]" id="aula"> AULA 
<br><input type="text" name="caja[]"> EQUIPO
<br><input type="text" name="caja[]"> MOTIVO
<br><br><input type="button" value="Insertar" onclick="insertarTabla()"> </br>
  </br>
  <table border="1" cellspacing="0" style="border-collapse: collapse;">
    
      <tr>
        <th>AULA</th>
        <th>EQUIPO</th>
        <th>MOTIVO</th>
       </tr>
     
     <tbody id="miTabla">
     </tbody>
   </table>
   <br>
   <button onclick="cuantasFilas()">Consultar incidencias</button>
   <p id="demo"></p>
   <p id="demo2"></p>

</body>
</html>

Y archivo javascript:

var cajas = document.getElementsByName("caja[]");
    
    function insertarTabla() {
      var fila = "<tr></tr>";
      for (key = 0; key < cajas.length; key++)
        fila =
          fila.substring(0, fila.length - 5) +
          "<td>" +
          cajas[key].value +
          "</td>" +
          fila.substring(fila.length - 5);
    
      var elementoTR = document.createElement("tr");
      elementoTR.innerHTML = fila;
      document.getElementById("miTabla").appendChild(elementoTR);
    }
    
    function cuantasFilas() {
      var cantidadFilas = document.getElementById("miTabla").rows.length;
      document.getElementById("demo").innerHTML =
        "Hay " + cantidadFilas + " incidencias.";
      var valoresAula = document.getElementById("aula").value;
    
      for (var i = 0; i < valoresAula.length; i++) {
        document.getElementById("demo2").innerHTML =
          "Prueba valores aula: " + valoresAula[i].search("A1");
      }
    }

Gracias de antemano.

3
  • Creo que lo mas simple es ir insertando los datos en un array y cuando quieres contabilizar solo los agrupas.
    – Ange Reyna
    Commented el 18 ene. 2021 a las 21:13
  • Cuando dices contabilizar los valores de la columna con id="aula", solo veo un elemento cuya id es aula (y no debería haber más), por lo que no entiendo a qué te refieres con contabilizarlos. ¿Podrías aclarar ese aspecto de los requerimientos mejor? Gracias. Commented el 18 ene. 2021 a las 21:21
  • cierto, la intención es contabilizar los valores de la primera columna que es aula, cuantos de cada valor igual, es decir si se introdujo 4 veces el valor EJ1, 2 veces el valor EJ3.. etc
    – TecnoWolF
    Commented el 18 ene. 2021 a las 21:27

1 respuesta 1

1

Podrías solucionar el problema de la cuenta iterando por cada celda y agregando a una variable una propiedad con la cantidad de veces que encuentres un valor:

let resultados = {};
/* Buscamos las primeras columnas de cada fila */
let elementos = document.querySelectorAll(
  "table tbody tr > td:nth-child(1)"
);
elementos.forEach(elemento => {
  if (resultados.hasOwnProperty(elemento.innerText)) {
    resultados[elemento.innerText]++;
  } else {
    resultados[elemento.innerText] = 1;
  }
});

Como puedes ver, la primera vez que pasamos por un valor no existirá la propiedad, por lo que debemos darle un valor inicial de 1 (el primer encuentro). A partir de las siguientes veces que encontremos el mismo término se incrementará en uno su contenido.


Aquí tienes el código en funcionamiento:

var cajas = document.getElementsByName("caja[]");

function insertarTabla() {
  var fila = "<tr></tr>";
  for (key = 0; key < cajas.length; key++)
    fila =
      fila.substring(0, fila.length - 5) +
      "<td>" +
      cajas[key].value +
      "</td>" +
      fila.substring(fila.length - 5);

  var elementoTR = document.createElement("tr");
  elementoTR.innerHTML = fila;
  document.getElementById("miTabla").appendChild(elementoTR);
}
    
function cuantasFilas() {
  var cantidadFilas = document.getElementById("miTabla").rows.length;
  document.getElementById("demo").innerHTML =
    "Hay " + cantidadFilas + " incidencias.";
  var valoresAula = document.getElementById("aula").value;

  /* Empezamos sin valores */
  let resultados = {};
  /* Buscamos las primeras columnas de cada fila */
  let elementos = document.querySelectorAll(
    "table tbody tr > td:nth-child(1)"
  );
  elementos.forEach(elemento => {
    if (resultados.hasOwnProperty(elemento.innerText)) {
      resultados[elemento.innerText]++;
    } else {
      resultados[elemento.innerText] = 1;
    }
  });
  console.log(resultados);
  for (let indice in resultados) {
    document.getElementById("demo2").innerHTML +=
      "Elemento \"" + indice + "\": repetido " +
      resultados[indice] + " veces<br>";
  };
}
/* Evitamos que la consola de depuración tape el resultado */
#demo2 {
  padding-bottom: 200px;
}
<input type="text" name="caja[]" id="aula"> AULA <br />
<input type="text" name="caja[]"> EQUIPO <br />
<input type="text" name="caja[]"> MOTIVO <br />
<br />
<input type="button" value="Insertar" onclick="insertarTabla()">
<br /><br />
<table border="1" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <th>AULA</th>
    <th>EQUIPO</th>
    <th>MOTIVO</th>
  </tr>
  <tbody id="miTabla">
  </tbody>
</table>
<br />
<button onclick="cuantasFilas()">Consultar incidencias</button>
<p id="demo"></p>
<p id="demo2"></p>

1
  • 1
    Perfecto muchas gracias eso era exactamente lo que buscaba, ahora si me quedo claro
    – TecnoWolF
    Commented el 19 ene. 2021 a las 1:14

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.