文章源自：http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/
Sum HTML Textbox Values using jQuery / JavaScript
Here is a small code snippet to sum the values of all textboxes in a form in JavaScript using jQuery. I wrote it for some functionality and thought to share it with you all. The requirement is simple, whenever user modify the value of a textbox, the fresh sum should be calculated and displayed on the form. I used jQuery for this as it provides simple way of selecting elements and iterating through them.
Source Code
Following is the complete source code.
<html>
<head>
<title>Sum Html Textbox Values using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>4</td>
<td>Milk</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>5</td>
<td>Bread</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>6</td>
<td>Soap</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
<script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>
Let us step by step see what above code is doing.
- First the
$(document).ready()is called which gets triggered whenever the webpage is loaded. - Inside
$(document).ready(), we selected all textboxes by the class name “.txt” and iterate through each of them and added event handler on keydown event. Thus whenever keypress event will occur, the code will triggercalculateSum()function. Note that you may want to change the selector code that suits your html elements. In this case we selected textboxes based on class=”txt” as all textbox has this class. - The keydown event triggers the function
calculateSum(). In this function again we iterate through each textboxes and sum up the values in a variable sum. Note that we have checked whether the value is number before adding it to the sum. - Finally we update the innerHTML property of span #sum using
$("#sum").html(sum)code. You may want to display the sum in some textbox or some other place.
相关推荐
"Add Textbox Dynamically using jQuery.zip"这个压缩包中的示例，主要展示了如何利用jQuery在用户交互时动态创建一个新的文本输入框。 首先，jQuery库是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画...
</html> ``` 在上面的例子中，我们创建了一个 `easyui-textbox` 输入框和一个 `easyui-combobox` 下拉选择框。对于 `easyui-textbox`，我们通过 `onchange` 属性直接绑定了一个名为 `handleTextboxChange` 的函数，...
在ASP.NET中，由于服务器控件在客户端的ID可能会改变，我们需要使用`ClientID`属性来获取TextBox在HTML中的实际ID，以便于JavaScript可以正确地找到它。 除了直接使用JavaScript，还可以结合ASP.NET的Web Methods...
为了实现类似电子表格那样的编辑功能，我们可以将TextBox控件内嵌到ListView的每一项中，使用户能够直接在ListView上修改数据。这种技术在C#编程中尤为常见，尤其在需要对大量数据进行查看和编辑的应用中。 首先，...
本教程将详细讲解如何使用TextBox结合Jquery的WdatePicker插件实现一个方便快捷的日期选择器。 首先，`TextBox`是ASP.NET中的一个控件，用于创建用户可以输入文本的HTML元素。在JavaScript中，我们可以对这个控件...
/// 从FORM2的TEXTBOX值设置到FORM1 TEXTBOX的值 /// </summary> /// <param name="Value"></param> private void SetTextBoxValue(string Value) { textBox1.Text = Value; } private void button1_Click...
HTMLTextBox可能就是基于此控件，通过JavaScript或者ActiveX对象与.NET代码交互，实现对HTML内容的读写。 2. **HTML解析与操作**：为了编辑HTML，控件可能包含了HTML解析器，用于将HTML字符串转化为DOM（文档对象...
"<script language=javascript>\n" + "var OldColor;\n" + "function ltmouseover(ctrl,color)\n" + //当鼠标移入时,调用该方法,ctrl为表格,color为要改变的颜色值 "{\n" + "OldColor = ctrl....
本文将详细讲解如何在TextBox获得焦点时显示JavaScript日历控件，为用户带来更好的交互体验。 首先，我们需要一个TextBox控件，用户在输入日期时可以点击它，然后弹出日历供用户选择。在ASP.NET页面中，创建TextBox...
- 使用`Controls`集合迭代页面上的所有控件，检查每个控件是否为TextBox类型，然后将其文本设置为空字符串。 8. 冒泡排序算法：冒泡排序是一种简单的排序算法，通过比较相邻元素并交换位置来逐步排序数组。 9. ...
改变一下思路变成键盘按键事件，如下： ”txtName” runat=”server” xss=...6){ jQuery(“#checkSta”).html(“姓名过短！”).css(“color”,”red”); }else{ myajax(); } } 下面是网上搜索的一些内容： 代码如下:
在这个"Drag and Drop Inserting Text to Input Textbox with jQuery"的项目中，我们关注的是如何利用jQuery库来实现这一功能，特别是在输入文本框中插入拖放文本的场景。jQuery是一个流行的JavaScript库，它简化了...
可以使用JavaScript库如jQuery或原生JavaScript来监听TextBox的`click`事件。当用户点击TextBox时，显示日历下拉列表。这里我们以jQuery为例： ```javascript $('#datePicker').click(function() { // 显示日历...
在IT行业中，Web开发是至关重要的领域，而ASP.NET、jQuery和JavaScript是构建高效、交互性强的网页应用的三大核心技术。在这个场景下，我们将重点讨论如何利用这些技术，特别是jQuery库来增强ASP.NET中的日期输入...
例如，可以使用jQuery或其他JavaScript库来监听回车事件，并通过AJAX调用服务器端的方法，避免页面整体刷新。 总的来说，绑定TextBox的回车事件在ASP.NET中可以通过结合HTML、JavaScript和C#代码实现。通过监听键盘...
在.NET框架中，HtmlTextBox控件是一个非常实用的组件，特别是在处理HTML格式的数据时，比如显示和编辑HTML格式的电子邮件。这个控件是由C#语言编写的，它为开发者提供了一个方便的方式来处理富文本，允许用户输入和...
路径/to/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 路径/to/ligerUI/js/core/base.js" type="text/javascript"></script> 路径/to/ligerUI/js/plugins/ligerTextBox.js" type="text/...
此外，对于复杂的计算逻辑，可以考虑使用现有的JavaScript库，如jQuery或lodash，它们提供了丰富的工具和函数，能简化代码并提高效率。最后，为了让代码更具可维护性，推荐遵循一定的编码规范，并使用模块化或面向...
本篇文章将详细探讨如何在JavaScript环境中，特别是在与TextBox结合使用时，实现一个功能丰富的日期选择控件。 标题提到的"js日期控件与textbox一起使用"，指的是在HTML文本框（TextBox）旁边添加一个日期选择器，...
在C#编程中，TextBox控件是用于用户输入文本的常用元素，常见于Windows Forms或WPF应用程序。然而，有时我们需要限制用户只能在TextBox中输入数字，以确保数据的准确性和一致性。本教程将详细讲解如何实现一个只允许...