CODEWITHSUNDEEP
javascripthtml
Julius Gitonga
Julius Gitonga

Reputation: 311

javascript Count class occurrences per table row and summarize in another table

The table below identifies successes and failures using color codes:Green means success,Red means failure. 

<table>
    <thead>
        <th>mon</th>
        <th>tue</th>
        <th>Wed</th>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td class="miss"></td>
            <td class="hit"></td>
            <td class="miss"></td>
        </tr>
        <tr>
            <td>Dick</td>
            <td class="hit"></td>
            <td class="hit"></td>
            <td class="miss"></td>
        </tr>
        <tr>
            <td>Harry</td>
            <td class="miss"></td>
            <td class="miss"></td>
            <td class="hit"></td>
        </tr>
    </tbody>
</table>

This next table gives a summary of successes and failures per person

<table id="summary">
    <thead>
        <th>Name</th>
        <th>Hits</th>
        <th>misses</th>
        <th>% compliance</th>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td id="success"></td>
            <td id="failed"></td>
            <td id="percentage"></td>
        </tr>
        <tr>
            <td>Dick</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Harry</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

The Javascript below is supposed to get a count of class occurrences per name

$(function () {
    var $rows = $("#summary tbody tr");

    $rows.each(function (n) {
        $("#failed").html('<b>' + $('tr .miss').length + '</b>');
        $("#success").html('<b>' + $('tr .hit').length + '</b>  ');
        var total = $('.hit').length + $('.miss').length;
        var completed = $('.hit').length;
        var compliance = parseInt(completed * 100 / (total));
        $("#percentage").html('<b>' + compliance + ' % </b>');
    });
});

Here is the css

td.hit {
    background-color:#76F33A !important;
}
td.miss {
    background-color:#FF0F0F !important;
}

I want to get css class count per row in the summary table?

Upvotes: 0

Views: 1437

Answers (2)

Michael Humelsine
Michael Humelsine

Reputation: 601

As an alternative, make a simple object that holds the values:

var countByName = [];
$('tbody tr').each(function(){
    countByName.push({
        name: $(this).children().first().text(),
        hits: $(this).children('.hit').length,
        misses: $(this).children('.miss').length
    });
});

Then you can process the objects to create your summary table.

Upvotes: 0

epascarello
epascarello

Reputation: 207501

You are not filtering based on the row, you are grabbing them for the whole table.

Your code $('tr .miss').length needs to be $(this).find('.miss').length where this is the tr in the each loop

Personally I would do it like this:

$("#stats tbody tr").each( function(){  //get the rows

  var cells = $(this).find("td");  //get the cells
  var name = cells.eq(0).text();   //name
  var hit = cells.filter(".hit").length;  //count the hits
  var miss = cells.filter(".miss").length;  //count the misses
  var per = (hit / (hit + miss) * 100).toFixed(0);  //calc percentage of hits
  
  var row = "<tr><td>" + name + "</td><td>" + hit + "</td><td>" + miss + "</td><td>" + per + "</td></tr>";  //build row
  
  $("#summary tbody").append(row);  //add it to the new table

} );
.hit { background : green; }
.miss{ background : red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="stats">
  <thead>
    <th>Name</th>
    <th>mon</th>
    <th>tue</th>
    <th>Wed</th>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td class="miss">&nbsp;</td>
      <td class="hit">&nbsp;</td>
      <td class="miss">&nbsp;</td>
    </tr>
    <tr>
      <td>Dick</td>
      <td class="hit">&nbsp;</td>
      <td class="hit">&nbsp;</td>
      <td class="miss">&nbsp;</td>
    </tr>
    <tr>
      <td>Harry</td>
      <td class="miss">&nbsp;</td>
      <td class="miss">&nbsp;</td>
      <td class="hit">&nbsp;</td>
    </tr>
  </tbody>
</table>


<table id="summary">
  <thead>
    <th>Name</th>
    <th>Hits</th>
    <th>misses</th>
    <th>% compliance</th>
  </thead>
  <tbody>
  </tbody>
</table>

Upvotes: 1

Related Questions