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

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. superslide2

    标签切换 / 书签切换 / 默认效果 http://www.superslide2.com/demo.html 4个Web前端经典实用值得学习收藏的地图实现模板~ http://www.iteye.c ...

  2. js时间基本操作

    js 获取前一天的时 var today=new Date(); var yesterday_milliseconds=today.getTime()-1000*60*60*24; var yeste ...

  3. Struts 2零配置

    从struts2.1开始,struts2不再推荐使用Codebehind作为零配置插件,而是改为使用Convention插件来支持零配置,和Codebehind相比,Convention插件更彻底,该 ...

  4. XCode 打包问题巧遇

    XCode 打包问题巧遇 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句: ...

  5. 十二.200多万元得到的创业教训--app名字是关键

    摘要:当完毕了一个app后,就要须要上应用市场,以下讲一下起名和上应用市场的一些技巧. 健生干货分享:第12篇 1.必须是先上app store,再上其它应用市场 为啥要这样做?由于app store ...

  6. (原创)初识cordova(一)

    在公司做项目,发现有人在做大项目使用了cordova技术.做的是昆山的项目.之前听说过phonegap,也测试过,但是感觉效率不是很好,就没怎么研究,后来看他们做的项目还不错,于是想试一试. 搭建开发 ...

  7. Flexbox属性查询列表

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

  8. (转)Jquery弹窗插件Lhgdialog的用法

    Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...

  9. SVN—patch的应用

    svn 补丁的应用,在eclipse下有时候不能把全部变化加入,出现中文乱码问题.以下转载其他文章 原文地址:http://xiebh.iteye.com/blog/347458 1.create p ...

  10. 武汉科技大学ACM ：1010: 华科版C语言程序设计教程（第二版）例题7.8

    Problem Description 输入一个用年月日表示的日期,求该日期是该年的第几天.输入某年的第几天,输出这一天是该年的几月几号,茂茂解不出,需要你的帮助. Input 开始有个整数k,表示询 ...