点击表中的总和

Question

我的任务是制作一个表，该表具有可单击的行，这些行在单击时变为绿色，它还应该显示绿色表行中数字（计数）的<td>的值，我只是似乎无法管理它。我该如何处理？

$(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

我建议即时计算总数，而不是像这样保持运行总数...

$(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>

Answer 2

$(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);
});