我正在尝试制作一个表格，当您单击它时，单击的行会变成绿色，并且表中的值会被计算在内，现在它只计算单击的行数，但我想将其更改为低于该值的金额。
$(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>最佳答案
- 使用
.eq( -1 )获取该行的最后一个 TD 元素 - 获取它的
.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>关于html - 在表中单击时计算值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52544913/