Jquery使用tbody编辑功能实现table输入计算功能
实例:编写一个输入计算(被减数-减数=差)。
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输入计算功能的更多相关文章
- JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
- 实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...
- Vanilla Masker – 功能强大的输入过滤插件
Vanilla Masker 是一个纯 JavaScript 实现的输入内容过滤和自动转换插件.现在你可以使用一个简单而纯粹的 JavaScript 库来控制你的 input 元素,而不需要加载 jQ ...
- 04实现累加和计算功能并且实现textbox不允许输入数字以外的字符但不包括退格键同时不允许第一个数值为0
private void button1_Click(object sender, EventArgs e) { double number1, number2; if (double.TryPars ...
- Android仿iPhone晃动撤销输入功能(微信摇一摇功能)
重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...
- stm32输入的功能引脚功能介绍
Ⅰ.写在前面在开发STM32的时候,都需要对IO的模式进行配置(GPIO_InitStructure. GPIO_Mode = xxx).但是,你们都知道各种模式的具体意义吗? 有的人问:IO口输出可 ...
随机推荐
- java中文件操作的工具类
代码: package com.lky.pojo; import java.io.BufferedReader; import java.io.BufferedWriter; import java. ...
- apache archiva安装教程
1. 下载archiva standalone http://archiva.apache.org/download.cgi 2. 解压,设置ARCHIVA_HOME 环境变量 3.为了防止冲突, ...
- Python Cookbook笔记
字符串:s.strip() 删除字符串开始和结尾的空白字符. s.lstrip() 删除左边的,s.rstrip() 删除右边的. 随机数:random.random() 生成0-1之间的数. ...
- 获得HttpServletResponse及其他对象
下面只列出获得 HttpServletResponse 对象的方法,获得 HttpServletRequest 对象方法类似. 在struts1.x Action类的execute方法中,有四个参数, ...
- 成都传智播客java就业班和基础班
传智播客成都Java培训,带你走进Java的世界... 我们有咨询的教育团队,一流的名师指导: 我们是重视基础理论建设,强化高端应用技能: 我们有四大JavaEE项目,海量Android项目: 我们是 ...
- PLSQL developer 连接不上64位Oracle 的解决方法
Windows 64位下装Oracle 11g 64位,PLSQL Developer使用出现以下问题: 1.Database下拉框为空:2.强制输入用户名.密码及Database,登录弹出: 引用 ...
- [React Testing] Element types with Shallow Rendering
When you render a component with the Shallow Renderer, you have access to the underlying object. We ...
- 为什么HikariCP被号称为性能最好的Java数据库连接池,怎样配置使用
HiKariCP是数据库连接池的一个后起之秀.号称性能最好.能够完美地PK掉其它连接池. 原文地址:http://blog.csdn.net/clementad/article/details/469 ...
- NSRunLoop个人理解
作者: xwang 出处: http://www.cnblogs.com/xwang/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...
- Log4Qt 使用(二)
本文基于上一篇<Log4Qt 使用(一)>来继续完善一下关于Log4Qt的使用. 在讲解之前,我们首先来看一个例子: int main(int argc, char *argv[]) { ...