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

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. Storm实现单词计数

    package com.mengyao.storm; import java.io.File; import java.io.IOException; import java.util.Collect ...

  2. java笔记4之比较运算符

    /*    比较运算符:        ==,!=,>,>=,<,<=            特点:        无论你的操作是简单还是复杂,结果是boolean类型.   ...

  3. AvalonEdit 对于选定的文本添加前缀和后缀

    1: /// <summary> 2: /// 两边追加标志 3: /// </summary> 4: /// <param name="syntax" ...

  4. Parsing XML in J2ME

    sun的原文,原文地址是http://developers.sun.com/mobility/midp/articles/parsingxml/. by Jonathan KnudsenMarch 7 ...

  5. 浅谈C++中的那些内存泄露

    尽管学过C语言.可是C++里面的一些基础还是不太懂,还须要再掌握. 老范也開始要讲C++设计模式了,必须快点看了.不然就要白花窝滴钱了. 对于内存泄露,我的个人理解就是程序在执行过程中,自己开辟了空间 ...

  6. 学习 Netty 3.x

    study link: http://netty.io/3.6/guide/#architecture 应用场景: Chat server that requires persistent conne ...

  7. HDU 5067-Harry And Dig Machine（DFS）

    Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  8. 打开新窗口（window.open）

    open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路 ...

  9. 国外十个出名的 upload 上传组件

    在日常开发中,我们常会用到很多的组件及共用代码提高我们的开发效率.   King MEDIA - $ 17.00 / 11 Sales DNNStore | 6/5/2014 6:06:42 PM|  ...

  10. iOS ui界面vtf 开发

    addConstraints 添加约束的步奏 添加控件到view中 设置translateResizeLayoutintoautolayout = false 添加约束 注意 约束 : 出现 有父子关 ...