时间戳

首页 > 解决方案 > 点击表中的计数值

html - 点击表中的计数值

问题描述

我正在尝试制作一个表格，当您单击它时，单击的行变为绿色，并且表中的值被计算在内，现在它只计算单击的行数，但我想将其更改为低于该值。

$(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;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>


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

</body>

标签： htmljavascriptjquery

解决方案

  • 通过使用获取行的最后一个 TD 元素.eq( -1 )
  • 获取它.text()并用于parseInt将字符串转换为整数：

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

  $('tbody tr').click(function() {
  
    var $td = $(this).find("td").eq( -1 );    // Get desired row's cell
    var tdVal = parseInt( $td.text(), 10);    // Convert content string to integer
    
    $(this).toggleClass("green-cell");
    
    
    if ($(this).hasClass("green-cell")) {
      count+= tdVal;
    } else {
      count-= tdVal;
    }
    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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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>

推荐阅读