[英]How can add all the values of Input Number tag inside the td of a table, only if any change in any column value
I am trying to find sum of all values of all the Input Number under the class 'emphrs' in javascript.我试图在 javascript 中的 class 'emhrs' 下找到所有输入数字的所有值的总和。 The sum of all Input numbers should be calculated only if there is any change in any column value of input under the class 'emphrs'.
仅当 class 'emhrs' 下输入的任何列值发生任何变化时,才应计算所有输入数字的总和。 Here is my code, the total should be stored in a variable only if there is any change in input number under the class emphrs
这是我的代码,只有在 class emhrs 下的输入数发生任何变化时,才应将总数存储在变量中
<tbody>
@if (Model.Emplist != null)
{
for (var i = 0; i < Model.Emplist.Count; i++)
{
<tr>
<td style="width:10%;text-align:center;vertical-align:middle;">@Model.Emplist[i].EmployeeName</td>
<td >
<div class="showinline">
@Html.TextBoxFor(m => m.attendanceLogList[i].NormalHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,
@Value = Model.attendanceLogList[i].NormalHrs, @type = "number", onchange = "CalculateTotal(this);" })
</div>
</td>
<td>
<div class="showinline">
@Html.TextBoxFor(m => m.attendanceLogList[i].DayOffHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,
@Value = Model.attendanceLogList[i].DayOffHrs, @type = "number", onchange = "CalculateTotal(this);" })
</div>
</td>
<td>
@Html.TextBoxFor(m => m.attendanceLogList[i].HolidayHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,
@Value = Model.attendanceLogList[i].HolidayHrs, @type = "number", onchange = "CalculateTotal(this);" })
</td>
</tr>
}
}
</tbody>
<script>
function CalculateTotal(element) {
var $box = $(element);
console.log($box);
$box.parent('td').parent('tr').find(".emphrs").each(function () {
// Here I have to sum up all the values of Tds having the class emphrs
});
}
</script>
Yes certainly.是的,当然了。 There are 2 things u need to do.
你需要做两件事。 First, you need add a java script function to calculate the total.
首先,您需要添加一个 java 脚本 function 来计算总数。 Then you need to add onChange on your input in html.
然后您需要在 html 中的输入上添加 onChange。
change input in your view into something like this将您视图中的输入更改为这样的内容
<td>@Html.TextBoxFor(m => m.Emplist[i].NormalHrs, new { @class = "form-control input-sm NormalHrs", @Value = @item.NormalHrs, onchange = "CalculateTotal()" })</td>
What I did here is to add a NormalHrs class and also the CalculateTotal Function in the html text box.我在这里所做的是在 html 文本框中添加 NormalHrs class 和 CalculateTotal Function。
Here is the javascript function to add the total这里是javascript function 加总
function CalculateTotal() {
var itemCount = $('.NormalHrs').length; // get Item Count by Class
for (i = 0; i < itemCount; i++) {
var NormalHrs = parseFloat($('#Emplist_' + i + '__NormalHrs').val()).toFixed(2); // get value for each rows
if (isNaN(NormalHrs)) {
NormalHrs = 0;
}
var totalNormalHours = 0;
totalNormalHours = +totalNormalHours + +NormalHrs;
alert(totalNormalHours);
}
}
Do let me know whether the code is working.请让我知道代码是否有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.