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()));
           });
        });

    });

效果图:

注:表弟说不知道怎么实现,于是就有了此文。

时间: 2024-10-18 13:04:28

Jquery使用tbody编辑功能实现table输入计算功能的相关文章

小谷实战Jquery(二)--可以编辑的表格

今天实现的是一个表格的例子,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格可以在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路很清晰,只是在实现的过程中会出现一些小bug.通过jQuery函数就可以一一解决. 下面看下HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

jquery 鼠标拖动排序Li或Table

1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

实战Jquery(二)--能够编辑的表格

今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的过程中会出现一些小bug.通过jQuery函数就能够一一解决. 以下看下HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾 最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇http:/

可编辑ztree节点的增删改功能图标控制---已解决

<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <l

屏幕对象的F1/F4输入帮助功能

1.HELP-REQUST[FOR{LOW|HIGH}]字段的F1帮助 当选择SAP屏幕功能的制定字段按F1键时可以调关注用自定义的程序或者系统帮助文件,该功能通常称为F1帮助. TYPES:syst. SELECT-OPTIONS:s_date FOR syst-datum. AT SELECTION-SCREEN ON HELP-REQUEST FOR s_date-low. PERFORM show_f1. *&---------------------------------------

Vanilla Masker – 功能强大的输入过滤插件

Vanilla Masker 是一个纯 JavaScript 实现的输入内容过滤和自动转换插件.现在你可以使用一个简单而纯粹的 JavaScript 库来控制你的 input 元素,而不需要加载 jQuery,Zepto 或者其它框架.不用担心兼容性,因为这是一个跨浏览器和跨设备的库. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuer

lua中打印所以类型功能实现table嵌套table

lua中打印所以类型功能实现 本人测试 number.string.bool.nil.table嵌套table.userdata没问题 共享一下有什么问题请拍砖 代码如下 cclog = function( ... ) local tv = "\n" local xn = 0 local function tvlinet(xn) -- body for i=1,xn do tv = tv.."\t" end end local function printTab(i

jquery实现的拖动可以调整table单元格大小代码实例

jquery实现的拖动可以调整table单元格大小代码实例: 本章节介绍一下如果利用jquery实现表格单元格可以通过鼠标拖动调整大小的效果,当然如果让我们完全写代码的话,可能会比较的复杂,不过有现成的插件可以使用,只要简单的几个步骤就可以实现我们的要求. 一.引入相关库文件: 要使用相关插件,那就必须要引入相关的代码文件,如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript">&