<!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. 继承方法-->一级一级继承

    Grand.prototype.lastName = 'ji'; function Grand(){}; var grand = new Grand(); Father.prototype = gra ...

  2. （匹配）Oil Skimming -- hdu --4185

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

  3. http://blog.csdn.net/zgl07/article/details/43491399

    转载申明:本文转载自http://www.brendangregg.com/perf.html   请大家看了之后如果要转载一定要注上这个地址!!! ========================= ...

  4. Opengl中的gluProject函数认识

    1. 从官方说明如下 https://www.opengl.org/sdk/docs/man2/xhtml/gluProject.xml Name gluProject — map object co ...

  5. Paxos与zookeeper

    1,什么是Paxos算法? Paxos算法是分布式计算领域中一个非常重要的算法,主要解决分布式系统如何就某个值(决议)达成一致的问题.一个典型的场景是分布式数据库的一致问题:如果分布式数据库的各个节点 ...

  6. How to create a Multi-device Site - some details

    https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/index?hl ...

  7. delphi自带的SHA1算法

    delphi自带的SHA1算法 uses IdHashSHA, IdGlobal; function SHA1(Input: String): String; begin with TIdHashSH ...

  8. matlab的特殊字符（上下标和希腊字母等）

    'T=25\circC',(摄氏度) 下标用 _(下划线) 上标用^ (尖号) 希腊字母等特殊字符用 α \alpha β \beta γ \gamma θ \theta Θ \Theta Г \Ga ...

  9. c3p0----获取不到链接

    最近别人的项目,因为经常获取不到链接出错,我好奇也就跟着摆弄了一把,使用的插件是:c3p0+spring+ibatiS,当然事务管理部分也配置上了配置如下: <bean id="dat ...

  10. linux系统编程之信号（六）：信号发送函数sigqueue和信号安装函数sigaction

    一,sigaction() #include <signal.h> int sigaction(int signum,const struct sigaction *act,struct ...