基于jQuery实现表格数据的动态添加与统计的代码


                                                          图(1.1)
    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式，自动计算运送费用,并且能自动统计所有运送货物的总运费。运送货物信息的数据量（即表格的行数）不定,要求能动态增加、删除,即表格的数据行数是动态可维护的。同时为了方便操作，需要在页面中能像使用键盘的上下左右方向键，在录入的文本框之间进行切换。每行的数据有一定的校验要求，比如单号必须为8位数字，件数和重量必须为数字...
    单行货物信息计算运费不难实现,只需要在计费重量和费率的文本框对象的onblur事件中,得到费率和计费重量,按照公式计算好运费即可。

总计费用的统计也不难实现,遍历整个表格的所有费用对象,统计其和,将计算结果放到总计的文本框对象即可。

难点在动态添加整行表格数据,而且每行数据上的各文本框对象的事件也要实现自动统计和运算,有相当的难度。如果使用JavaScript需要调用Dom对象创建一个<tr>单元格,还需要在tr里面添加10多个单元格<td>对象,每个单元格<td>对象内要添加文本框对象,还需要在文本框对象上响应onblur事件进行运费计算,代码量相当大。

使用jQuery可以大大减轻工作量,在实际开发中,使用了jQuery的clone(true)函数,该函数可以创建一个jQury对象的副本,并且参数为true时,可以复制该元素的所有事件处理函数。

我们可以在第一行中实现计算运费的运算。然后点增加明细按钮时,调用jQuery 的clone(true)函数,建立第一行的副本对象插入到表格下方,由于使用clone(true)可以复制对象的事件处理函数,所以每行中文本框的onblur事件和运费计算函数也被成功复制,不需再做处理。大大减轻了工作量。
    关键代码
(一)创建克隆单元格对象并添加到表格中


代码如下:

var v=$("#tbin");//得到表格的jquery对象
//所有的数据行有一个.MyRow的Class,得到数据行的大小
var vcount=$("#tbin tr").filter(".MyRow").size()+1;//表格有多少个数据行
var vTr=$("#tbin #trDataRow1"); //得到表格中的第一行数据
var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone
vTrClone.appendTo(v);//把副本单元格对象添加到表格下方

(二)统计更新总金额


代码如下:

function UpdateTotal()//更新总金额
{
var vTotalMoney=0;//总金额的初始值为0;
var vTable=$("#tbin");//得到表格的jquery对象
var vTotal= vTable.find("#txtTotal") ;//得到总金额对象
var vtxtAfters=vTable.find("#txtMoney");//得到所有计算好的费用对象;
vtxtAfters.each( //使用jQuery的each函数遍历每行费用对象,累加成总金额
function(i)
{
var vTempValue=$(this).val();
if(vTempValue=="")
{
vTempValue=0;
}
vTotalMoney=vTotalMoney+parseFloat(vTempValue);//计算总费用
}
)//遍历结束
vTotal.val(vTotalMoney); //将总费用显示到对应文本框对象中
}

(三)计费重量变化时计算费用,并统计总费用


代码如下:

$("#txtMoneyWeight").bind("change", function()
{
var vTotalMoney=0;//总金额的初始值为0;
var vtxtDetail=$(this);//得到变化的文本框对象
var vVal=vtxtDetail.val();
var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtRate");//得到费率;
var vtxtMoney=vtxtDetail.parent("td").parent("tr").find("#txtMoney");//得到费用;
var vMoney=CalculatorMoney(vVal,vtxtAfter.val());//使用公式计算单行运费
vtxtMoney.val(vMoney); //显示单行运费信息
UpdateTotal(); //调用函数统计更新总费用
}); //变化脚本结束

键盘的控制和数据的校验在源程序中有详细注释，具体代码可参考源程序。

赞 (0)

相关推荐

  • jquery实现动静态条形统计图

    jquery实现动静态条形统计图

    下图为jquery实现静态条形统计图,在选择题统计中用的比较多. 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tiao.aspx.cs" Inherits="qiantaoflash.tiao" %> <!DOCTYPE html PUBLIC "

  • php和jquery实现地图区域数据统计展示数据示例

    php和jquery实现地图区域数据统计展示数据示例

    HTML 首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框. 复制代码 代码如下: <div id="map"></div> <div id="tip"></div> jQuery 通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数

  • 统计jQuery中各字符串出现次数的工具

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery统计用户选中的复选框的个数

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"></script> </head> <body> <input type="che

  • Jquery AJAX 用于计算点击率(统计)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Demo </TITLE> </HEAD> <BODY> <script src="jquery.js" type="text/javascript"></

  • jquery统计输入文字的个数并对其进行判断

    jquery统计输入文字的个数并对其进行判断

    1.js代码部分 复制代码 代码如下: <script type="text/javascript"> $(function() { function albumName() { var text = $("#album_name").val(); var counter = text.length; $("#numtj var").text(counter); $(document).keyup(function() { var t

  • jquery中防刷IP流量软件影响统计的一点对策

    遭遇刷IP.刷流量软件的困扰 本以为有效控制同一天对同一个IP仅算一次的方案就能有效防止用户多次刷新地址作弊的现象,我得承认涉世未深孤陋寡闻 - -,一直忽视现在的刷流量软件如此的强大,我们的项目也遭遇使用刷流量软件的情况,因而产生不少垃圾数据,甚至影响统计的准确性. 为解决这种情况也特意下载了两款知名度比较高的刷流量软件"流量宝"和"流量精灵"了解一下,不用不知道,一用确实是个好东西. 这两款软件的原理都一样,估计其它的也差不多吧,就是利用网络互访原理,利用网络节

  • jQuery圆形统计图开发实例

    jQuery圆形统计图开发实例

    本文实例讲述了jQuery圆形统计图开发的方法.分享给大家供大家参考.具体分析如下: 这里我们要给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便.效果图如下: 首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中. 复制代码 代码如下: <script src="js/jquery-1.10.2.min.js"></script

  • 基于jQuery实现表格数据的动态添加与统计的代码

    基于jQuery实现表格数据的动态添加与统计的代码

                                                              图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

  • android ListView内数据的动态添加与删除实例代码

    main.xml 文件: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_pa

  • JQuery实现表格数据行上移与下移

    JQuery实现表格数据行上移与下移

    本文实例为大家分享了JQuery实现表格数据行上移与下移的具体代码,供大家参考,具体内容如下 效果展示 代码实现 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Bootstrap 实例 - 条纹表格</title>     <link rel="stylesheet" href="https

  • jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    上面的人要hui admin  做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了 发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接 比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC

  • 基于jquery实现表格无刷新分页

    基于jquery实现表格无刷新分页

    本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre

  • jQuery给指定的table动态添加删除行的操作方法

    jQuery给指定的table动态添加删除行的操作方法

    最近写程序,碰巧有动态增加删除行的,下面就记录一下. $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自

  • 利用jquery给指定的table动态添加一行、删除一行的方法

    利用jquery给指定的table动态添加一行、删除一行的方法

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

  • 基于jQuery实现表格内容的筛选功能

    基于jQuery实现表格内容的筛选功能

    废话不多说了,直接给大家贴关键代码了.具体代码如下所示: <html> <head> <title>表格内容的筛选</title> <link type="text/css" rel="stylesheet" href="css/contains.css" /> <style type="text/css"> table { width: 50%; bor

  • jQuery简单实现向列表动态添加新元素的方法示例

    jQuery简单实现向列表动态添加新元素的方法示例

    本文实例讲述了jQuery简单实现向列表动态添加新元素的方法.分享给大家供大家参考,具体如下: 先看看效果图: 完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery列表添加新元素</title> <script src="jquery-

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

随机推荐