CODEWITHSUNDEEP
javascripthtml
Skatterbrainz
Skatterbrainz

Reputation: 1087

Javascript Count HTML Column Values

Using Javascript within an HTML page, is it possible to count the instances of a given text value in the cells for a given column? In other words, if one of the columns contains cell values of either "1" or "2", can I generate a "total" count of how many "2" values exist in that column?

Upvotes: 1

Views: 7773

Answers (3)

user113716
user113716

Reputation: 322502

EDIT: Regarding your comment:

Example: http://jsfiddle.net/cGS99/

var rows = document.getElementById('myTable').rows,
    len = rows.length,
    i,
    cellNum = 0,
    count = 0,
    cell;

for (i = 0; i < len; i++) {
    cell = rows[i].cells[cellNum];
    if (cell.innerHTML === 'X') {
        count++;
    } else if(cell.innerHTML === '...') {
        cell.innerHTML = count;
    }
}

or if by the column with "...", you meant the last column, change this:

    } else if(cell.innerHTML === '...') {

to this:

    } else if(i === (len - 1)) {

Example: http://jsfiddle.net/cGS99/1/

doh!

var rows = document.getElementById('myTable').rows, // get the rows in the table
    len = rows.length,    // get the quantity of rows
    cell = 1,             // index of the column (zero based index)
    count = 0;            // keep score

while( len-- ) {
    if( rows[len].cells[cell].innerHTML.indexOf('2') > -1 )
        count++;
}

This will work as long as the content doesn't have possible sub-strings of "2", like "12".

Upvotes: 3

Skatterbrainz
Skatterbrainz

Reputation: 1087

@patrick_dw pointed me in the direction I needed (thanks!). Here's the result that works for me...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title></title>
<script language="Javascript">
function getx() {
    var rows = document.getElementById('myTable').rows, // get the rows in the table
    len = rows.length,    // get the quantity of rows
    cell = 0,             // index of the column (zero based index)
    count = 0;            // keep score

    while( len-- ) {
        if( rows[len].cells[cell].innerHTML.indexOf('1') > -1 )
            count++;
    }
    document.getElementById('colx').innerHTML = count;
}
</script>
</head>

<body onload="getx();">

<table id="myTable" border="1">
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>1</td>
        <td>B</td>
    </tr>
    <tr>
        <td>2</td>
        <td>A</td>
    </tr>
    <tr>
        <td id="colx"> </td>
        <td></td>
    </tr>
</table>

</body>

</html>

Upvotes: 0

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Sounds like you are looking for the contains selector. fiddle.

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>2</td>
    </tr>
</table

Use length

$('td:contains(1)').length
$('td:contains(2)').length

Output:

--> 4
--> 2

Upvotes: 1

Related Questions