Sum values in a table on click

Question

I got the task to make a table that has clickable rows that turn green when clicked, it is also supposed to show the value of the <td> of the numbers (count) in the green table row, I just can't seem to manage it. How should I approach this matter?

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    if ($(this).hasClass("green-cell")) {
      count++;
    } else {
      count--;
    }
    countEl.html(count);
  });
});

.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td, th {
  border: solid 1px #cccccc;
}

td, th {
  padding: 5px;
}

tbody tr {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Count: <span id="count"> 0</span>
  <br/><br/>
  <table class="table " id="onclick">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>2</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>3</td>
      </tr>
      <tr>
          <td>henk</td>
          <td>janssen</td>
          <td>4</td>
      </tr>
      <tr>
          <td>piet</td>
          <td>Paulisma</td>
          <td>5</td>
      </tr>
      <tr>
          <td>Theo</td>
          <td>van gogh</td>
          <td>6</td>
      </tr>
      <tr>
          <td>Erik</td>
          <td>Doerustig</td>
          <td>7</td>
      </tr>
      <tr>
          <td>Jan</td>
          <td>de steen</td>
          <td>8</td>
      </tr>  
    </tbody>
  </table>
</div>

Answer 1

$(document).on('click', 'tbody tr', function(){
   $(this).addClass('green-cell');
   var rowCount = 0;
   var valueTotal = 0;
   $('tbody tr.green-cell').each(function(){
        rowCount += 1;
        valueTotal += Number($(this).find('td:last-child').text());
   });
   alert(rowCount);
   alert(valueTotal);
});

Answer 2

I'd recommend calculating the total on-the-fly, rather than keeping a running total, like this...

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");

    var count = 0;

    // find all the selected rows and total the values in the 3rd column
    $("tbody tr.green-cell").each(function() {
        count += Number($(this).find("td").eq(2).text());
    });

    countEl.html(count);
  });
});

.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td, th {
  border: solid 1px #cccccc;
}

td, th {
  padding: 5px;
}

tbody tr {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  Count: <span id="count"> 0</span>
  <br/><br/>
  <table class="table " id="onclick">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>2</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>3</td>
      </tr>
      <tr>
          <td>henk</td>
          <td>janssen</td>
          <td>4</td>
      </tr>
      <tr>
          <td>piet</td>
          <td>Paulisma</td>
          <td>5</td>
      </tr>
      <tr>
          <td>Theo</td>
          <td>van gogh</td>
          <td>6</td>
      </tr>
      <tr>
          <td>Erik</td>
          <td>Doerustig</td>
          <td>7</td>
      </tr>
      <tr>
          <td>Jan</td>
          <td>de steen</td>
          <td>8</td>
      </tr>  
    </tbody>
  </table>
</div>