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

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. zookeeper[3] zookeeper API开发注意事项总结

    如下是根据官方接口文档(http://zookeeper.apache.org/doc/r3.4.1/api/org/apache/zookeeper/ZooKeeper.html#register( ...

  2. java 定义mysql树形菜单

    数据库中的数据如下: 1.首先在Dao中实现查找方法 public List<ProductType> findAllByRoot() { //定义集合,添加ProductType对象 L ...

  3. springboot中的406(Not Acceptable)错误

    今天遇到一个很奇怪的问题,我用springboot开发时,用ajax请求服务想返回json数据,页面总是报406错误,这个错误使我郁闷了很久,原来我的后台服务是这么写的 看到没value的后面有个.h ...

  4. 《Programming Massively Parallel Processors》Chapter5 习题解答

    自己做的部分习题解答,因为时间关系,有些马虎,也不全面,欢迎探讨或指出错误 5.1 Consider the matrixaddition in Exercise 3.1. Can one use s ...

  5. Android 中文 API (40) —— RatingBar

    Android 中文 API (40) —— RatingBar 前言 本章内容是 android.widget.RatingBar,译为"评分条",版本为Android 2.2 ...

  6. LF will be replaced by CRLF问题解决方法

    [GIT] warning: LF will be replaced by CRLF问题解决方法 开发环境: 操作系统: windows xp ruby 1.9.2 rails 3.1.3 git v ...

  7. GPG error [...] NO_PUBKEY [...]

    今天在Linux下遇到这个问题,发现很多资料都是英文的,为了方便出现同样错误的有英语阅读困难的人,整理解决方案如下: sudo apt-key adv --keyserver keyserver.ub ...

  8. Java基础知识强化60：经典查找之二分查找

    1. 二分查找       二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表. 比较 ...

  9. samba服务简介

    1.1 Samba 概述Samba主要用于Windows和Linux之间的文件共享,也一样用于Linux和Linux之间的共享文件:不过对于Linux和Linux之间共享文件有更好的网络文件系统NFS ...

  10. 纯js滑动脚本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...