<!DOCTYPE html>

<html dir="ltr" lang="zh-CN">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width" />

<title>jQuery 表格自动增加</title>

<meta name="keywords" content="jQuery, 表格, table, 自动增加" />

<meta name="description" content="jQuery表格自动增加" />

<meta name="viewport" content="width=device-width" />

<meta name="copyright" content="imsole.net" />

<meta name="designer" content="sole" />

<meta name="publisher" content="imsole.net" />

<meta name="author" content="sole" />

<meta name="robots" content="all" />

<meta name="distribution" content="global" />

<style type="text/css">

table { width:900px; margin:50px auto; border-collapse:collapse; border-spacing:; }

table tr, table th, table td { border:1px solid #ddd; font-size:12px; }

table tr td:first-child { width:30px; text-align:center; }

table td input { width:%; height:%; padding:5px ;  border: none; }

table td input:focus { box-shadow:1px 1px 3px #ddd inset; outline:none; }

table td a { display: block; width:30px; }

</style>

<body>

<table id="count">

    <tr><th>序号</th><th>姓名</th><th>金额[USD]</th><th>时间</th><th>项目</th><th>单位</th><th>备注</th><th>操作</th></tr>

    <tr>

        <td></td>

        <td><input type="text" /></td>

        <td><input type="text" /></td>

        <td><input type="text" /></td>

        <td><input type="text" /></td>

        <td><input type="text" /></td>

        <td><input type="text" /></td>

        <td><a href="javascript:;" class="del">删除</a></td>

    </tr>

</table>

<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

/*  这是一种方法，但是不精简，不过很好理解，就像面向过程编写代码一样。

    var oTable = $("#count"), oTr = '', oInput = '', eEle = '';

    oTable.on('mouseover', function(){

        oTr = oTable.find('tr').last();

        oInput = oTr.find('input');

        eEle = oTr.clone();

        oInput.on('click', function(){

            var parent = $(this).parents('tr');

            if(oTr.index() == parent.index()){

                oTable.append(eEle);

            }

        });

    });

*/

//这是第二种方法，比较精简，要看对jQ的理解了。

var oTable = $("#count"), iNum = , eEle = '';

oTable.on('click', function(e){

    var target = e.target,

        oTr = $(target).closest('tr');

    if ($(target).hasClass('del') && oTr.index()>) {

        iNum--;

        var nextID = oTr.nextAll('tr').find('td:eq(0)');

        nextID.each(function(i, ele){

            $(ele).text( $(ele).text()- );

        });

        oTr.remove();

        return;

    };

    if(oTr.index() == oTable.find('tr').last().index()){

        iNum++;

        eEle = oTr.clone();

        eEle.find('td').eq().text(iNum);

    }

    oTable.append(eEle);

 });

});

</script>

 </body>

</html>

jQuery表格自动增加的更多相关文章

  1. jquery 表格自动拆分（方便打印）插件-printTable

    /** * jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak ...

  2. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  4. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  5. 25个顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  6. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  7. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. java.lang.ExceptionInInitializerError Caused by: org.hibernate.InvalidMappingException: Unable to read XML

    此错误是说无法读取你的xml文档,于是我们就该去更改xml文档,因为我是自动生成的,所以我找了一份之前手写的,发现是dtd错了,把之前的dtd拷贝过来之后程序就测试通过了

  2. webuploader 文件上传总结

    $(function() { /** * 初始化Web Uploader */ var uploader = WebUploader.create({ swf : '../mobile/Uploade ...

  3. cxf-rs 、spring 和 swagger 环境配置切换【github 有项目】

    环境切换的目的是 准生产和生产环境切换时,只修改一个文件就可以达到效果 在spring bean 文件中 配置: <bean class="cn.zno.common.context. ...

  4. （最小生成树） 畅通工程再续 -- HDU --1875

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1875 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  5. Andfix热修复原理

    一.前言 最近腾讯弄出一个Tinker热修复框架,那么本文先不介绍这个框架,先来介绍一下阿里的一个热修复框架AndFix,这个框架出来已经很长时间了,但是看网上没有太多非常详细的讲解,这里就来做一次分 ...

  6. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  7. bootstrap 问题

    less; sass: css预处理:可以直接使用.css,也可以修改.less,生成定制化的css CDN: 服务,使用这个效果会更好.theme一般不引入,jquery一般在js之前引入. 使用b ...

  8. C# winform程序实现开机自启动，并且识别是开机启动还是双击启动

    开机启动程序,在很多场合都会用到,尤其是那种在后台运行的程序. 效果图: 以上两幅图都用到了命令行启动程序,为了模拟开机启动或者其他程序调用此程序. 第一幅图:程序启动可以根据不同参数,执行不同的操作 ...

  9. C#委托总结-入门篇

    1,概念:委托类型表示对具有特定参数列表和返回类型的方法的引用. 通过委托,可以将方法视为可分配给变量并可作为参数传递的实体. 委托是引用类型,可以把它看作是用来存方法的一种类型.比如说类型strin ...

  10. Mac OS 10.12 - 解决“bad interpreter: No such file or directory”问题！

    在Mac OS10.12里面执行shell脚本时候,无法执行,错误提示:“bad interpreter: No such file or directory”,经过上网搜索,最终解决了,解决方法,首 ...