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
    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. 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
    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
    el 19 ene. 2021 a las 1:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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