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

Do you wish to count rows or cells? E.g. in one row can be more cells with specified attribute, or not? — sinisake
– sinisake, Commented Nov 29, 2016 at 0:03

Imesha Sudasingha · Accepted Answer · 2016-11-28 23:58:55Z

2

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>

answered Nov 28, 2016 at 23:58

Imesha Sudasingha

3,5801 gold badge29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Over a year ago

Thank you for the Response. I have some Troubles to insert the varaible 'TableID' and 'alt' into the snippet.

Yaser · Accepted Answer · 2016-11-28 23:52:07Z

1

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;

answered Nov 28, 2016 at 23:52

Yaser

5,7391 gold badge18 silver badges28 bronze badges

1 Comment

RobG Over a year ago

The OP only wants the ones in rows, so the selector should be 'table [alt=Green]' or similar.

Zakaria Acharki · Accepted Answer · 2016-11-28 23:56:12Z

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>

Collectives™ on Stack Overflow

Count rows in table with specific cell content

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related