实例：编写一个输入计算（被减数-减数=差）。

HTML：

 <body>

    <table>

        <thead>

            <tr>

                <td >被减数</td>

                <td>减数</td>

                <td>差</td>

            </tr>

        </thead>

        <tbody id="tab1">

            <tr id="0">

                <td><input type="text" value="40"/></td>

                <td><input type="text" value=""/></td>

                <td><input type="text" value=""/></td>

            </tr>

            <tr id="1">

                <td><input type="text" value="50"/></td>

                <td><input type="text" value=""/></td>

                <td><input type="text" value=""/></td>

            </tr>

            <tr id="2">

                <td><input type="text" value="60"/></td>

                <td><input type="text" value=""/></td>

                <td><input type="text" value=""/></td>

            </tr>

        </tbody>

    </table>

  </body>

JavaScript:

$(document).ready(function() {

        $("#tab1 tr").each(function(){

           var trs=[];

           var tr=$(this);

           $(tr).find("input").each(function(){

              trs.push($(this));

           });

           $(trs[1]).bind("blur",function(){

                trs[2].val(parseFloat(trs[0].val())-parseFloat(trs[1].val()));

           });

        });

    });

效果图：

注：表弟说不知道怎么实现，于是就有了此文。

Jquery使用tbody编辑功能实现table输入计算功能的更多相关文章

  1. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  2. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  3. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  4. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  5. 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值

    首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...

  6. Vanilla Masker – 功能强大的输入过滤插件

    Vanilla Masker 是一个纯 JavaScript 实现的输入内容过滤和自动转换插件.现在你可以使用一个简单而纯粹的 JavaScript 库来控制你的 input 元素,而不需要加载 jQ ...

  7. 04实现累加和计算功能并且实现textbox不允许输入数字以外的字符但不包括退格键同时不允许第一个数值为0

    private void button1_Click(object sender, EventArgs e) { double number1, number2; if (double.TryPars ...

  8. Android仿iPhone晃动撤销输入功能(微信摇一摇功能)

    重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...

  9. stm32输入的功能引脚功能介绍

    Ⅰ.写在前面在开发STM32的时候,都需要对IO的模式进行配置(GPIO_InitStructure. GPIO_Mode = xxx).但是,你们都知道各种模式的具体意义吗? 有的人问:IO口输出可 ...

随机推荐

  1. 广州Uber优步司机奖励政策（12月28日到1月3日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. apache shiro内置过滤器 标签 注解

    内置过滤器 anon(匿名)  org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证)       org.apache.shiro ...

  3. Intellj Idea 2016.1.3的使用

    Intellj Idea 2016.1.3的使用:http://blog.csdn.net/bleachswh/article/details/51811055 极客学院教程:http://wiki. ...

  4. CSS3:优雅地绘制不规则ICON

    早上在w3ctech上看到 中国第二届CSS Conf总结  的时候,真是开心极了: 自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分 ...

  5. Linux 下文件监控

    本文转自http://www.jiangmiao.org/blog/2179.html 在日常应用中,常常会遇到以下场景,监控文件夹A,若文件夹中的B文件发生变化,则执行C命令.Linux下可以通过i ...

  6. android后台截屏实现(3)--编译screencap

    修改好之后就要编译了,screencap的编译是要在源码环境中进行的. 将修改后的screencap.cpp文件替换源码中的原始文件,然后修改screencap的Android.mk文件,修改后的文件 ...

  7. JAVA内存区域和GC机制

    目录 Java垃圾回收概况 Java内存区域 Java对象的访问方式 Java内存分配机制 Java GC机制 垃圾收集器 Java垃圾回收概况 Java GC(Garbage Collection, ...

  8. Python购物车的实现课程

    需求: 1.用户输入工资收入 2.打印商品列表 3.用户选择商品,不断的加入购物车 4.检测用户余额,直接捐款,不足提示余额不足 5.允许主动退出,退出时,打印已购商品列表 重点方法: 打印列表下标的 ...

  9. css中常用的标签

    最常用的标签 left 左 top 上 right 右 bottom 下 font 字体 size 大小 width 宽度 height 高度 class 类 label 标签 form 表单 gro ...

  10. easyui 快速开发整理

    下面整理了关于easyui的datagrid的开发文档,复制黏贴即刻使用 1: <link href="../../Content/easyUI/themes/default/easy ...