<!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. Linux服务器部署系列之五—Webmin篇

    对于很多习惯使用windows的用户,在刚接触Linux的时候,要使用命令行配置Linux服务器可能会感觉难以适应.今天我们来讲解一下,Linux下的图形配置工具—Webmin,通过这款工具,用户可以 ...

  2. org.hibernate.HibernateException: /hibernate.cfg.xml not found等三个问题

    初次配置hibernate在myeclipse上: 出现三个问题,怎么都不好使,比对代码,没有问题,查看路径还是没有问题: 1.org.hibernate.HibernateException: /h ...

  3. string转换成char*

    string 是c++标准库里面其中一个,封装了对字符串的操作 把string转换为char* 有3中方法: 1.data 如: string str="abc"; char *p ...

  4. PAT甲 1001. A+B Format (20) 2016-09-09 22:47 25人阅读 评论(0) 收藏

    1001. A+B Format (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Calculate ...

  5. 博客搬家到 http://leijun00.github.io

    博客园对markdown支持不太好,搬家到 http://leijun00.github.io

  6. 结对编程-四则运算生成器(java实现)

     结对伙伴:陈振华  项目要求 1.题目:实现一个自动生成小学四则运算题目的命令行程序. 2.需求: 1. 使用 -n 参数控制生成题目的个数 2. 使用 -r 参数控制题目中数值(自然数.真分数和真 ...

  7. [leetcode] 19. Count and Say

    这个还是一开始没读懂题目,题目如下: The count-and-say sequence is the sequence of integers beginning as follows: 1, 1 ...

  8. Redis连接异常

    1. 以指定配置文件启动Redis,否则配置的东西不生效 redis-cli shutdown 关闭 $ redis-server ./redis.conf 2.连接异常 redis.conf 配置文 ...

  9. 【加密算法】Base64

    一.简介 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法.可查看RFC2045-RFC2049,上面有MIME的详细规 ...

  10. Angular6 学习笔记——内容投影, ViewChild和ContentChild

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...