英文:
Sum the cell from another cell in html using jquery and show result in another cell
问题
我想对同一行的另一个单元格中的特定单元格进行求和，并将结果粘贴到该行的总列中。
以下是我的代码。
alert($(this).find('#table tr td input#quantity').val());
但它不起作用，弹出警告时显示未定义/非数字错误。
英文:
I want to sum focused cell in a table from another cell of same row and paste result in a total column of that row.
Below is my code.
> alert($(this).find('#table tr td input#quantity').val());
But its not working as giving me Undefined/Nan Error in alert.
答案1
得分: 2
我建议使用CSS类而不是ID，这样可以计算单独的行并具有任意数量的行。还提供了总和的示例。
input{
max-width:100px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input readonly class="sum" placeholder="Sum"></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input readonly class="sum" placeholder="Sum"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input readonly class="total" placeholder="Total"></td>
</tr>
</table>
英文:
I recommend to use CSS classes instead of IDs that will allow you to calculate a separate row and have any numbers of rows. An example of the total sum is also provided.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#table').on('input', 'input:not(.sum, .total)', e => {
const $table = $(e.originalEvent.currentTarget);
const $row = $(e.target).closest('tr');
const calcSum = (elem, from) => {
const sum = [...from].reduce((sum, elem) => {
const val = parseFloat(elem.value);
return sum + (val === val ? val : 0);
}, 0) || NaN;
elem.val(sum === sum ? sum : '');
};
// calc sum of the row
calcSum($row.find('.sum'), $row.find(':not(.sum)'));
// calc total
calcSum($table.find('.total'), $table.find('.sum'));
});
<!-- language: lang-css -->
input{
max-width:100px;
text-align: center;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input readonly class="sum" placeholder="Sum"></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input readonly class="sum" placeholder="Sum"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input readonly class="total" placeholder="Total"></td>
</tr>
</table>
<!-- end snippet -->
答案2
得分: 2
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<!DOCTYPE html>
<html>
<head>
<title> Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="total-input" readonly /></td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
// Function to update the total
function updateTotal(row) {
var total = 0;
var inputs = row.find('.input-box');
// Iterate through each input box in the current row
inputs.each(function() {
var value = parseFloat($(this).val());
// Check if the value is a valid number
if (!isNaN(value)) {
total += value;
}
});
// Set the total value in the last input box of the same row
row.find('.total-input').val(total);
}
// Listen for input changes on the input boxes
$('.input-box').on('input', function() {
var row = $(this).closest('tr');
updateTotal(row);
});
});
</script>
</body>
</html>
<!-- end snippet -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<!DOCTYPE html>
<html>
<head>
<title> Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="input-box" /></td>
<td><input type="text" class="total-input" readonly /></td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
// Function to update the total
function updateTotal(row) {
var total = 0;
var inputs = row.find('.input-box');
// Iterate through each input box in the current row
inputs.each(function() {
var value = parseFloat($(this).val());
// Check if the value is a valid number
if (!isNaN(value)) {
total += value;
}
});
// Set the total value in the last input box of the same row
row.find('.total-input').val(total);
}
// Listen for input changes on the input boxes
$('.input-box').on('input', function() {
var row = $(this).closest('tr');
updateTotal(row);
});
});
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论