我正在动态地将行插入页面。我想要做的是计算所有周一输入数据并将其显示在一个总框中。数字可以以整数或.25，.50，.75为增量输入，如果您在其间使用任何数字，它将向上舍入。
当我使用blur时，我的工作正常，但我真的希望它可以在keyup上运行，以便动态更新。
我的问题是，如果我使用keyup，则该值会自动更改为值更正值，除非我按住删除。输入2.23作为示例。
如果没有完全重写我的代码，有没有办法让我可以动态更新总体字段？我整个下午大部分时间都在摸不着头脑。任何帮助表示赞赏。
$(document).on('keyup', '.Monday', findTotalMon);
function findTotalAll() {
var arr = document.getElementsByName('total');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('totalHoursAll').value = tot;
if (tot === 0) {
document.getElementById('totalHoursAll').value = '';
}
}
function findTotalMon() {
var arr = document.getElementsByClassName('Monday');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value)) {
var newValue = '';
newValue = (.25 * Math.round(4 * arr[i].value));
arr[i].value = newValue;
tot += parseFloat(newValue);
}
}
document.getElementById('totalHoursMon').value = tot;
if (tot === 0) {
document.getElementById('totalHoursMon').value = '';
}
findTotalAll();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="form-control full-width Monday" name="monday" id="monday" type="number" />
<input name="total" id="totalHoursMon" type="text" readonly/>
答案 0 :(得分：1)
原始答案
<小时/> 我在移动设备上，但我会尝试解释我的意思。
$(document).on('keyup', '.Monday', findTotalMon);
function findTotalAll() {
var arr = document.getElementsByName('total');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('totalHoursAll').value = tot;
if (tot === 0) {
document.getElementById('totalHoursAll').value = '';
}
}
function findTotalMon() {
var arr = document.getElementsByClassName('Monday');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value)) {
var newValue = '';
newValue = (.25 * Math.round(4 * arr[i].value));
// Don’t change this value yet
// This is causing the input to change as you type
/* arr[i].value = newValue; */
// Instead you can create an html element next to the input
// And update the element with the new value
// After the user clicks out of the input you can then either update the input with the new value
// Or you can leave the input the way it is and keep the updated values beside the input
tot += parseFloat(newValue);
}
}
document.getElementById('totalHoursMon').value = tot;
if (tot === 0) {
document.getElementById('totalHoursMon').value = '';
}
findTotalAll();
}
已编辑的答案
<小时/> 这是我在尝试解释上述内容时的想法。
$(document).ready(function() {
// Set event listener on '.Monday' inputs
$(document).on('keyup', '.Monday', findTotalMon);
// Set event listener to add new input
$('body').on('click', '#addMore', addInput);
/**
* Add new input
*/
function addInput() {
// Get array with all elements with class 'monday-group'
var arr = $('.monday-group');
// Get array length
var length = arr.length;
// Set length to the insert next number
var inputIndex = length;
// HTML code for the new input
var newInput = '<div class="form-group col-md-4 monday-group">' +
'<input class="form-control full-width Monday d-inline-block mt-2 w-75" name="monday_' + inputIndex + '" id="monday_' + inputIndex + '" type="number" placeholder="Monday-' + inputIndex + '" />' +
'<span class="adjusted-' + inputIndex + ' text-muted d-inline-block ml-4"></span>' +
'</div>';
// Check if there are 5 fields or less
// If there are 5 fields then hide the add more button
if ( length >= 5 ) {
$('#addMore').css('display', 'none');
return false;
}
// Insert the new input field
$(newInput).insertAfter(arr[length - 1]);
}
/**
* Get grand total
*/
function findTotalAll() {
// Get array with all inputs with the class of 'row-total'
var arr = $('.row-total');
// Set total = 0
var tot = 0;
// Loop through array and add value to totals
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
// Show the totals
$('#totalHoursAll').val(tot);
// If totals = 0 then leave the totals input blank instead of 0
if (tot === 0) {
$('#totalHoursAll').val('');
}
}
/**
* Find totals for Monday
*/
function findTotalMon() {
// Get inputs with a class of 'Monday'
var arr = $('.Monday');
// Set totals to 0
var tot = 0;
// Loop through array adding the totals
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value)) {
var newValue = '';
// Calculate the adjusted value
newValue = (.25 * Math.round(4 * arr[i].value));
// This is the faded text with the adjusted value
// Include the adjusted value and display in case it is hidden
$('.adjusted-' + i).html(newValue).css('display', 'block');
// Set the total value
tot += parseFloat(newValue);
} else {
// Hide the adjusted value and make it blank
$('.adjusted-' + i).html('').css('display', 'none');
}
}
// Update the totals
$('#totalHoursMon').val(tot);
// If totals = 0 then leave the field blank instead of 0
if (tot === 0) {
$('#totalHoursMon').val('');
}
// Calculate Grand Totals
findTotalAll();
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group col-md-4 monday-group">
<input class="form-control full-width Monday d-inline-block w-75" name="monday_0" id="monday_0" type="number" placeholder="Monday-0" />
<span class="adjusted-0 text-muted d-inline-block ml-4"></span>
</div>
<div class="col-md-4">
<input type="text" class="form-control row-total" id="totalHoursMon" placeholder="Monday Totals" readonly>
<button id="addMore" class="btn btn-primary mt-4">Add More</button>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4 offset-md-8">
<input class="form-control" name="total" id="totalHoursAll" type="text" placeholder="Grand Total" readonly/>
</div>
</div>
</div>