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

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. ie11 selenium 报错org.openqa.selenium.NoSuchWindowException: Unable to get browser 处理方法

    selenium + ie11运行报错 org.openqa.selenium.NoSuchWindowException: Unable to get browser (WARNING: The s ...

  2. mysql简单练习

    数据库入门 2.1 引入 数据保存到内存: 优点: 1)读写非常快 缺点: 1)程序关闭导致数据丢失 数据保存到文件: 优点: 1)数据可以永久保存 缺点: 1)频繁地IO操作,效率不高! 2)数据管 ...

  3. Heritrix源码分析(十五)

    开博客以及建立Heritrix 群有一段时间了(这里谢谢大家的关注),这篇博客将整理这段时间所遇到的问题.同时由于自己从今年5月份开始就不怎么接触Heritrix,很多东西开始遗忘(不过里面思想没忘) ...

  4. iOS、mac开源项目及库（感谢原作者的分享）

    目录 模糊效果 富文本 表相关 HUD与Toast 其他UI 其他动画 网络测试 网络聊天 Model 数据库 PDF 摄像照相视频音频处理 消息相关 消息推送服务器端 版本新API的Demo 测试及 ...

  5. Mysql数据库的mysql Schema 究竟有哪些东西&amp; 手工注入的基础要领

    #查看数据库版本号 mysql> select @@version; +------------+ | @@version  | +------------+ | 5.5.16-log | +- ...

  6. [编辑中] 免费的Internet流量发生器 | Free Internet Traffic Generators

    流量发生器 (Traffic Generator) 是用来检测网络性能,进行网络相关研究的一个很重要的工具.大家可能用过Iperf或者IxChariot,前者是类UNIX环境下的一个免费.开源的网络性 ...

  7. MVC Controller 基类中的Request

    今天在测试自己MVC程序的时候发现之前写代码的一个BUG,需求是每个页面要获取当前URL链接中包含的城市ID,我把获取url的方法写到了Controller的基类BaseController(Base ...

  8. C#基础枚举的设计

    枚举分为:简单枚举和标记枚举(为了枚举值位操作) 标记枚举的用法:

  9. Flexbox属性查询列表

    1.任何一个flexbox布局的第一步是需要创建一个flex容器.为此给元素设置display属性的值为flex.在Safari浏览器中,你依然需要添加前缀-webkit. .flexcontaine ...

  10. NHibernate——基本映射(5)

    一.映射定义概括 1.1 映射定义(Mapping declaration) 对象和关系数据库之间的映射是用一个XML文档(XML document)来定义的.这个映射文档被设计为易读的,并且可以手工 ...