Use JQuery to count matching html table entries

Question

I have logfile data, and I want to use jQuery to count how many entries each "site" has. Further, I'd like to do something (maybe change the background color of) sites that have multiple entries:

<tr><td class='site'>123456</td><td>70</td><td>10.32</td><td>2014-03-04</td></tr>
<tr><td class='site'>123457</td><td>73</td><td>8.95</td><td>2014-03-03</td></tr>
<tr><td class='site'>123458</td><td>61</td><td>1.37</td><td>2014-03-05</td></tr>
<tr><td class='site'>123457</td><td>68</td><td>12.26</td><td>2014-03-04</td></tr>
<tr><td class='site'>123457</td><td>95</td><td>15.31</td><td>2014-03-05</td></tr>
<tr><td class='site'>123456</td><td>58</td><td>1.31</td><td>2014-03-05</td></tr>
<tr><td class='site'>123459</td><td>65</td><td>11.06</td><td>2014-03-05</td></tr>

So, from the html above, I would put the following totals into a div:

Site    Issues
123456    2
123457    3
123458    1
123459    1

...and I would highlight the two sites that have multiple entries (123456 and 123457) in the table. Can you point me in the right direction?

P.S. I'm already using "tablesorter" to sort the rows. Really handy plugin!

Barmar · Accepted Answer · 2014-03-05 22:59:36Z

2

var totals = {};
$("td.site").each(function() {
    var site = $(this).text();
    if (totals[site]) {
        totals[site]++;
    } else {
        totals[site] = 1;
    }
}

Now the object totals contains the counts you want.

answered Mar 5, 2014 at 22:59

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

mattkotys Over a year ago

Thank you very much - I was close, but I wanted to match text for some reason.

Sachin Jain · Accepted Answer · 2014-03-05 23:25:04Z

1

Here is one of the ways you can do it. Jsbin Demo

var result = {};

$('.site').each(function(index, element) {
  var $el = $(element);
  var site = $el.html();
  result[site] = result[site] || 0;
  result[site]++; 

  //To highlight sites with multiple issues
  if (result[site] > 1) {
    $el.css({background: 'green'}); //Or something else
  } 
});

console.log(result);

Update

For a corner case caught by @Eduardo and he suggested the fix as well in the comment. We should use this to highlight element otherwise we will miss to select the first element in multiple entries.

$('.site:contains('+site+')').css({'color': 'green'}); //Or something else

edited Mar 5, 2014 at 23:25

answered Mar 5, 2014 at 22:59

Sachin Jain

21.9k34 gold badges113 silver badges177 bronze badges

10 Comments

Barmar Over a year ago

Where do you set numIssues?

Sachin Jain Over a year ago

result[site][numIssues] = result[site][numIssues] || 0;

Barmar Over a year ago

That doesn't set the variable numIssues. You also never initalize the variable els.

Barmar Over a year ago

I think you mean result[site].numIssues and result.[site].els.

Sachin Jain Over a year ago

@Barmar yes..I made the typo..You are right..Will update the code.

|

أنيس بوهاشم · Accepted Answer · 2014-03-05 23:25:35Z

1

var sites = [];
var rows = $("tr");
for(var i in rows){
    var site = $("td.site", rows[i]).text();
    // if I've already saved this site, i go to the next one
    if(sites[site])continue;

    // i get how many times the site is repeated
    var count = $("td:contains('"+site+"')").length;

    // save result in an array
    sites[site] = count;
    // or display the result somehow
}

edited Mar 5, 2014 at 23:25

answered Mar 5, 2014 at 23:13

أنيس بوهاشم

9407 silver badges6 bronze badges

Collectives™ on Stack Overflow

Use JQuery to count matching html table entries

3 Answers 3

1 Comment

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related