Contabilizar registros, segun condicion en el mismo <tr>

[alexisfch]

Hola Amigos, tengo una tabla y la idea es contabilizar cuantos <td> cumplen una condicion dentro de otro <td> (que forme parte del mismo <tr>), en este ejemplo la condicion es que en el td sea "verde".

Código HTML:

<table>
    <tr>
	<td>rojo</td> 
        <td>circulo</td> 
    </tr>
    <tr>
        <td>verde</td> 
        <td>triangulo</td> 
    </tr> 
    <tr>
        <td>rojo</td> 
        <td>cuadrado</td>  
    </tr>
	<tr>
        <td>verde</td> 
        <td>circulo</td>  
    </tr>
	<tr>
        <td>verde</td> 
        <td>triangulo</td>  
    </tr>
</table> 

que me arroje un resultado asi: circulo=1, triangulo=2, cuadrado =0

[Alexis88]

Primero necesitas obtener un arreglo a partir de los valores de las celdas. Una vez hecho esto, debes recorrer el conjunto resultante y, con ayuda de un objeto literal, ir añadiendo los valores como índices y contándolos en cada ocasión que se repitan. Si un valor evaluado no existe como índice del objeto, se lo añade como tal y se inicia su cuenta en 1, caso contrario, se le suma 1.

Código Javascript:

var arreglo = $.map($("td"), function(td){
    return td.textContent;
});
 
for (var i = 0, l = arreglo.length, palabras = {}; i < l; i++){
    palabras[arreglo[i]] = palabras[arreglo[i]] ? ++palabras[arreglo[i]] : 1;
}
 
console.log(palabras);
console.log("Verde = " + palabras["verde"]);
 

El resultado será:

Código Console:

{rojo: 2, circulo: 2, verde: 3, triangulo: 2, cuadrado: 1}
Verde = 3
 

[alexisfch]

Entiendo, lo único malo que así solo veré un recuento general de cuantos objetos literales existen en la tabla, pero lo ideal seria solo hacer un recuento de los que cumplen con la condicion "verde", que para la tabla de ejemplo seria:

Código HTML:

circulo=1, triangulo=2, cuadrado =0

[xfxstudios]

podrias probar asi:

Código Javascript:

var td = $.map($("td"), function(td){
    return td.textContent;
});
 
var valor = "verde";
salida = new Object()
 
for (var i = 0; i < td.length; i++){
    if(td[i]==valor){
        if( salida.hasOwnProperty(td[i+1])==false ){
            salida[td[i+1]] = 1
        }else{
            salida[td[i+1]] = salida[td[i+1]] + 1
        }
    }
}
 

aunque no es elegante y no integra el cuadrado

[xfxstudios]

Tambien esta esta que es mucho menos elegante y que al final dependera que no cambien factores comop que las palabras no tengan espacios

Código Javascript:

var sale = [];
 
$("table tr").each(function(e){
 
    var tr = $(this)[0].textContent.replace(/(\r\n\t|\n|\r\t)/gm,"").trim();
    var t = tr.split(" ")
    
    if(t[0] != "verde"){
        sale[t[9]] = 0;
    }else{
        if(sale.hasOwnProperty(t[9])==false){
            sale[t[9]] = 1;
        }else{
            sale[t[9]] = sale[t[9]] + 1
        }
    }
 
})
console.log(sale)
 

[Alexis88]

Iniciado por alexisfch

[...] pero lo ideal seria solo hacer un recuento de los que cumplen con la condicion "verde", que para la tabla de ejemplo seria:

Código HTML:

circulo=1, triangulo=2, cuadrado =0

Fíjate nuevamente en el código que escribí. Imprimí, primero, la lista completa, y, después, la cantidad de veces que se encuentra la palabra "verde" en las celdas de la tabla.

Esta línea:

Código Javascript:

console.log("Verde = " + palabras["verde"]);
 

Y si quieres ver el resultado en un elemento HTML:

Código Javascript:

document.querySelector("#idDelElemento").textContent = "Verde = " + palabras["verde"];
 

[alexisfch]

Iniciado por Alexis88

Fíjate nuevamente en el código que escribí...

Es que tal vez no me expresé muy bien, pero no deseo saber cuanto "verde" hay

si te fijas la tabla tiene 2 columnas, una de ella es o "verde" o "rojo" y la segunda columna son las figuras (circulo, triangulo, cuadrado), la idea es contabilizar solo las que cumplan en la primera columna la condición "verde"

[xfxstudios]

Iniciado por alexisfch

Es que tal vez no me expresé muy bien, pero no deseo saber cuanto "verde" hay

si te fijas la tabla tiene 2 columnas, una de ella es o "verde" o "rojo" y la segunda columna son las figuras (circulo, triangulo, cuadrado), la idea es contabilizar solo las que cumplan en la primera columna la condición "verde"

Prueba los 2 codigos que te deje a ver cual te sirve o modificas

[alexisfch]

Iniciado por xfxstudios

Prueba los 2 codigos que te deje a ver cual te sirve o modificas

Si, me funciona, para imprimirlo en html como podria hacerlo???

Código HTML:

<div id="probando" ></div>
document.querySelector("#probando").textContent = salida;

[xfxstudios]

en el segundo codigo hay una variable que se llama sale, es un objeto, ya alli lo recorres y e imprimes los resultados en el html

[Alexis88]

Iniciado por alexisfch

Es que tal vez no me expresé muy bien, pero no deseo saber cuanto "verde" hay

si te fijas la tabla tiene 2 columnas, una de ella es o "verde" o "rojo" y la segunda columna son las figuras (circulo, triangulo, cuadrado), la idea es contabilizar solo las que cumplan en la primera columna la condición "verde"

Ya veo. En ese caso, solo habría que hacer una ligera modificación, verificando si la celda es la primera de la fila para así contabilizar el contenido.

Código Javascript:

var arreglo = $.map($("td"), function(td){
    if ($(td).parent().find("td").index(td) === 0){
        return td.textContent;
    }    
});
 
for (var i = 0, l = arreglo.length, palabras = {}; i < l; i++){
    palabras[arreglo[i]] = palabras[arreglo[i]] ? ++palabras[arreglo[i]] : 1;
}
 
$("#idDelElemento").text("Verde = " + palabras["verde"]); //Verde = 3