Question

我正在尝试创建一个表，当您单击该表时，被单击的行变为绿色，并且对表中的值进行计数，现在它只计算被单击的行数，但是我想将其更改为低于该值的金额。

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

Answer 1

使用const bcrypt = require("bcryptjs");
获取.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;
}

Answer 2

如果我了解您要正确执行的操作，那就是在单击一行时添加在count列中找到的值，您可以执行以下操作：

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

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    if ($(this).hasClass("green-cell")) {
      count += parseInt($(this).find('td:last-of-type()').text());
    } else {
      count -= parseInt($(this).find('td:last-of-type()').text());
    }
    countEl.html(count);
  });

Answer 3

只需更改此：

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

对此：

$('tbody tr').click(function() {
  $(this).toggleClass("green-cell");
  var value = parseInt($(this).children("td:last").html());
  if ($(this).hasClass("green-cell")) {
    count +=value;
  } else {
    count -=value;
  }
  countEl.html(count);
});

我们获取最后一个TD，即带有值的TD，然后使用parseInt将其转换为INT

Answer 4

如果我理解您的要求是正确的，那么您希望获得“计数”列的所有值的总和。现在，您只是在增加本地柜台。相反，您需要获取Count列的值并将其添加到当前值。

因此，基本上，您需要像这样更改Javascript

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

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    var curCount = parseInt($(this).find('td:last').text());
    if ($(this).hasClass("green-cell")) {

      count = count + curCount;
    } else {
      count = count - curCount;
    }
    countEl.html(count);
  });
});

Answer 5

我的jQuery非常生锈，但是您本质上想要在这里执行的操作是在被单击的行中找到最后一个表格单元格，然后添加/减去该单元格，而不仅仅是增加/减少计数器。

let amount = Number.parseInt($el.children('td').last().text());

此行表示金额等于在单击的行的最后td中找到的整数。然后将其添加到计数中，唯一的其他麻烦是如果单元格处于非活动状态，则需要减去。通常，避免其他情况（帮助消除捕获所有无法解释的效果）是一种很好的做法，因此我编辑了添加代码在所有情况下都应如此，如果单元格处于非活动状态，则应使数字为负。

$(function() {
  const $countEl = $('#count');
  let count = 0;
  
  $('tbody').on('click', 'tr', function() {
    const $el = $(this);
    let amount = Number.parseInt($el.children('td').last().text());
    $el.toggleClass('green-cell')
    
    if (!$el.hasClass('green-cell')) {
      amount = -amount;
    }
    
    count += amount;
    $countEl.text(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>

Answer 6

您可以使用Z元素的cells属性从该行的最后一个单元格中获取金额。

<tr>

然后，使用此值进行加/减，而不是增加或减少。

const amount = +this.cells[this.cells.length - 1].innerText;
if ($(this).hasClass("green-cell")) {
  count += amount
} else {
  count -= amount
}

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    const amount = +this.cells[this.cells.length - 1].innerText;
    if ($(this).hasClass("green-cell")) {
      count += amount
    } else {
      count -= amount
    }
    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;
}

表中点击计数

6 个答案: