Tengo el siguiente código HTML:
<table border="1"> <tr> <th>Nº</th> <th>NOMBRE</th> <th>AREA</th> </tr> <tbody id="curso"> <tr> <td>1</td> <td>Jose</td> <td>Gramática</td> </tr> <tr> <td>2</td> <td>Luis</td> <td>Gramática</td> </tr> <tr> <td>3</td> <td>Andrea</td> <td>Gramática</td> </tr> <tr> <td>4</td> <td>Andrea</td> <td>Idiomas</td> </tr> </tbody> </table> <p id="Cantidad"></p> </body>Este código puede contar el número de filas utilizando un criterio en el campo AREA:
<script> function ContarFila() { var cantidadFilas = document.getElementById("curso").rows.length; let resultados = {}; let elementos = document.querySelectorAll( "table tbody tr > td:nth-child(3)" ); 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("Cantidad").innerHTML = resultados['Gramática']; }; } window.onload=ContarFila(); </script>Al cargar la página y usar el criterio 'Gramática' del campo 'AREA', el resultado es 3.
¿Cómo incluyo MULTIPLE CRITERIOS con el campo 'NOMBRE' y 'AREA' al mismo tiempo?
Ejemplo:
Usando el Criterio 1: 'Gramática'
Usando el Criterio 2: 'Luis'
RESULTADO: 1
¡GRACIAS!
Si te entendí correctamente, quizás este ejemplo a continuación pueda ayudarte:
function getResult(table, search = {}) { const tableHeadCells = Array.from(table.tHead.rows[0].cells); const tableBodyRows = Array.from(table.tBodies[0].rows); const indexes = tableHeadCells.map((el) => el.dataset["label"]); // <= // ['index', 'nombre', 'area'] const count = tableBodyRows.reduce((acc, row) => { isSearched = indexes.every( (key, i) => !search[key] || search[key] === row.cells[i].innerText ); return isSearched ? ++acc : acc; }, 0); return count; } const table = document.querySelector('table'); console.log('1 => ', getResult(table, { area: 'Gramática' })); console.log('2 => ', getResult(table, { nombre: 'Luis', area: 'Gramática' })); console.log('3 => ', getResult(table, { index: '3', nombre: 'Andrea' })); <table border="1"> <thead> <tr> <th data-label="index">Nº</th> <th data-label="nombre">NOMBRE</th> <th data-label="area">AREA</th> </tr> </thead> <tbody id="curso"> <tr> <td>1</td> <td>Jose</td> <td>Gramática</td> </tr> <tr> <td>2</td> <td>Luis</td> <td>Gramática</td> </tr> <tr> <td>3</td> <td>Andrea</td> <td>Gramática</td> </tr> <tr> <td>4</td> <td>Andrea</td> <td>Idiomas</td> </tr> </tbody> </table> Tenga en cuenta que en el encabezado de la tabla, las columnas se indican mediante la data-label de datos de atributos de datos para comprender qué columna pertenece a qué palabra clave. Y luego, solo contamos la cantidad de elementos en el ciclo, que cumplen completamente con los requisitos especificados para todas las columnas.