Count rows in table with specific cell content

Question

I would like to count with javascript the rows with a specific cell content.
This is the HTML code for the table:

<table class="table table-bordered" id="UsersDataTable">
    <thead>
      <tr>
        <th>H0</th>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
        <th>H4</th>
        <th>H5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>C0</td>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
        <td>C4</td>
        <td><center><img src=".\pictures\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td>
      </tr>
    </tbody>
</table>

How can I count all cells with 'alt="Green"' ? Until now I have this code snippet:

function CountRows(TableID, alt) {
    var refTab = document.getElementById(TableID)
    var counter = 0
    for ( var i = 0; row = refTab.rows[i]; i++ ) {
        alert(refTab.rows[i].cells[5].innerHTML);
        if (refTab.rows[i].cells[5].innerHTML === alt)
        {
            counter ++
        }
    }

    return counter
}

Thanks for help
Patrick

Answer 1

You can use the document.querySelectorAll("#UsersDataTable [alt='Green']") to get what you want as follows. Then get the length of the returned array. That's your count.

 var v=document.querySelectorAll("#UsersDataTable [alt='Green']"); console.log(v.length); 

 <table class="table table-bordered" id="UsersDataTable"> <thead> <tr> <th>H0</th> <th>H1</th> <th>H2</th> <th>H3</th> <th>H4</th> <th>H5</th> </tr> </thead> <tbody> <tr> <td>C0</td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td><center><img src=".\\pictures\\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td> </tr> </tbody> 

Answer 2

If you can use jQuery it can be done like this:

var allElementsWithAltAttribute = $("[alt=green]");

Or you can use document instead in pure JS:

var allElementsWithAltAttribute = document.querySelectorAll('[alt=green]');

And to get the count:

var count = allElementsWithAltAttribute.length;

Answer 3

Your could check if there's any element with the passed alt using .querySelector('[alt="'+alt+'"]') so you code could be like :

if (refTab.rows[i].cells[5].querySelector('[alt="'+alt+'"]')!=null)
{
  counter++;
}

Hope this helps.

 function CountRows(TableID, alt) { var refTab = document.getElementById(TableID) var counter = 0 for ( var i = 0; row = refTab.rows[i]; i++ ) { if (refTab.rows[i].cells[5].querySelector('[alt="'+alt+'"]')!=null) { counter++; } } return counter; } alert( CountRows('UsersDataTable','Green') ); 

 <table class="table table-bordered" id="UsersDataTable"> <thead> <tr> <th>H0</th> <th>H1</th> <th>H2</th> <th>H3</th> <th>H4</th> <th>H5</th> </tr> </thead> <tbody> <tr> <td>C0</td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td><center><img src=".\\pictures\\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td> </tr> <tr> <td>C0</td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td>C5</td> </tr> <tr> <td>C0</td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td><center><img src=".\\pictures\\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td> </tr> <tr> <td>C0</td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td><center><img src=".\\pictures\\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td> </tr> </tbody> </table>