页面效果如下:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/WX_TEST/js/jquery-1.4.3.min.js"></script> <title>Insert title here</title> <style> #tbList input {width:90%;} th,td {padding-left:6px;padding-right:6px;padding-top:3px;padding-bottom:3px;;text-align:center} .calTr {background:cornsilk} </style> </head> <body > <div style="position:relative;width:300px" > <div style="text-align:right;margin-bottom:8px;margin-right:15px"> <input type="button" name="btnAdd" id="btnAdd" value="添加"> </div> <div> <table id="tbList" border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <th>No</th> <th>Item</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>材料费用</td> <td><input type="text" name="ipt" value="2.51"></td> </tr> <tr> <td>2</td> <td>人工费用</td> <td><input type="text" name="ipt" value="3.3"></td> </tr> </tbody> <tfoot> <tr class="calTr"> <td colspan="2">Min</td> <td><input type="text" name="iptMin" id="iptMin" readonly ></td> </tr> <tr class="calTr"> <td colspan="2">Max</td> <td><input type="text" name="iptMax" id="iptMax" readonly ></td> </tr> <tr class="calTr"> <td colspan="2">Sum</td> <td><input type="text" name="iptSum" id="iptSum" readonly ></td> </tr> </tfoot> </table> </div> </div> </body> </html> <script> $(function(){ // 页面Load时计算 calPrice(); }); function calPrice(){ var strSum = 0.00; var arrAll = new Array(); $("input[name=ipt]").each(function(){ if($(this).val() != ""){ // isNaN判断输入是否为数字 if(!isNaN($(this).val())){ // 将输入值放入数组中 arrAll.push($(this).val()); // 计算合计值 (parseFloat转换数据类型) strSum += parseFloat($(this).val()); }else{ alert("请输入数字!"); $(this).val("").focus(); return; }; } }); // 数组从小到大排序 arrAll = arrAll.sort(function(a,b){return a-b;}); // 计算最小值 $("#iptMin").val(arrAll[0]); // 计算最大值 $("#iptMax").val(arrAll[arrAll.length-1]); // 计算合计值 $("#iptSum").val(strSum); } // 添加行 $("#btnAdd").click(function(){ var len = Number($("tbody tr").size()) + 1; var newTr = $("<tr>"); newTr.append($(" <td>" + len + "</td>")); newTr.append($(" <td><input type='text' name='item' value='费用' style='width:60px'></td>")); newTr.append($(" <td><input type='text' name='ipt' onkeyup='calPrice()' style='width:60%'><input type='button' name='btnDel' value='删除' onclick='delPrice(this)' style='width:50px'></td>")); newTr.append($("</tr>")); // 将新添加行追加到tbody最后一行后 $("tbody tr:last").after(newTr); }); // 触发keyup事件 $("input[name=ipt]").keyup(function(){ calPrice(); }); // 删除行 function delPrice(obj){ $(obj).parent().parent().remove(); calPrice(); } </script>
相关推荐
话不多说,下面就跟着小编来看下利用jquery实现删除数组中重复元素的具体思路吧 首先定义如下数组: var arr=[0,2,3,5,6,9,2]; 我们可以看到数组中存在重复元素’2′; 最后通过jquery筛选应该得到[0,2,3,5,6,9]; ok...
jquery实现数组array、集合list、json类型的分页 其他可以查看代码,都有注释,调用也简单(当然,功能也简单 可以自己插入函数扩展一下)
下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery结合数组在ajax翻页中勾选已选择的复选框。
jquery实现数组array、集合list、json类型的分页 其他可以查看代码,都有注释,调用也简单(当然,功能也简单 可以自己插入函数扩展一下) 支持多个分页
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象 Javascript不支持多维数组,但是因为数组里面可以...
主要介绍了jquery validate 数组 全部验证问题及解决办法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
主要介绍了jquery的push使用方法,可向数组的末尾添加一个或多个元素,并返回新的长度,需要的朋友可以参考下
主要介绍了jQuery判断数组是否包含了指定的元素的方法,需要的朋友可以参考下
问题是这样的,通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环。 我是使用 $.each() 进行数组循环遍历,但是当进入判断时,不清楚该如何跳出当前循环,于是我就用 javascript 的方法...
需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象、基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串–[object Object],原因如下: 在后台接收的...
主要介绍了jquery数组过滤筛选方法grep()简介,需要的朋友可以参考下
下面小编就为大家带来一篇jquery 遍历数组 each 方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即...
jQuery编程实现一组由8幅图组成的图片,进入网页初始时显示前面4张,然后自动向左滚动,直到屏幕显示的是后4张时停止滚动,需要的朋友可以参考下
这里分享给大家的代码是springmvc接收jquery提交的数组数据的相关内容,具体代码如下: var selectedUsers = $('#users').tagbox('getValues'); if (selectedUsers.length > 0) { $.post(appPath + "/role/users/...
主要介绍了JQuery使用index方法获取Jquery对象数组下标的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以参考下
jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定