<!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. MATLAB常用函数

      Matlab的内部常数 pi                   圆周率 exp(1)             自然对数的底数e i 或j                虚数单位 Inf或 inf ...

  2. web service 架构

                                        Web services architecture The service provider sends a WSDL file ...

  3. （线段树）敌兵布阵--hdu--1166 （入门）

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1166 自己第一次在没有看题解AC出来的线段树,写的可能不是太好,再贴个学长的代码,学习一下 发现自己的U ...

  4. （最短路 Floyd）Cow Contest --POJ--3660

    链接: http://poj.org/problem?id=3660 思路: 1.  1->2->3==1->3 2.  记录每次的比赛人员 3.  每个人只能跟他序号不同的人比赛, ...

  5. spring案列——annotation配置

    一.需要的jar包 spring.jar commons-loggin.jar commons-loggin.jar commons-annotation.jar 二.项目结构 三.entity pa ...

  6. jquery使用ajax报错[Uncaught SyntaxError: Unexpected token :]

    $.post('/ajax/validate.do',{"id": id},function(ret){ //ret }); 返回值明明是json,格式也是正确的,却解析不成功,在 ...

  7. FreeBSD查看即时网络流量

    1.数据包 “netstat 1″一秒钟累计一次,”netstat 2″两秒钟累计一次.依此类推 2.查看网卡流量:”systat -if 1″每秒钟刷新一次,”systat -if 2″两秒钟刷新一 ...

  8. TFS应用层服务器获取F5用户的真实IP地址(高可用性)

    当用户数量达到一定级别(例如2千)以上,为保证TFS系统的持续服务,最大程度减少因系统宕机对研发团队的影响,系统管理员一般会考虑应用层和数据库层的高可用性方案. 在应用层的高可用性方案中,目前比较常见 ...

  9. centos：开启和关闭selinux

    5.4. Enabling and Disabling SELinux Use the /usr/sbin/getenforce or /usr/sbin/sestatus commands to c ...

  10. abp+angular+bootstrap-table的使用

    问题 materialize与bootstrap框架样式冲突 问题描述 在abp模板项目中引入bootstrap-table,列设置为checkbox,checkbox无法显示. 使用firefox浏 ...