Сумма значений в таблице по клику - PullRequest
Новая
       13

Сумма значений в таблице по клику

0 голосов
/ 27 сентября 2018

У меня есть задача создать таблицу, в которой строки, по которым можно кликать, при щелчке становятся зелеными, также должно отображаться значение <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>

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018 
$(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);
});
0 голосов
/ 27 сентября 2018

Я бы порекомендовал вычислять итоговую сумму на лету, а не сохранять промежуточную сумму, как это ... 

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