<!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. linxu ssh 双端认证 不成功之authorized_keys

    linxu ssh 双端认证 不成功之authorized_keys liunx双端认证可以让我们更简便的在两台服务器之间传输文件,配置暂且不说,网上有大部分的文章可以搜索到,今天我要说的是在不成功的 ...

  2. 20155218 2016-2017-2 《Java程序设计》第6周学习总结

    20155218 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. dump()方 ...

  3. Linux上查看造成IO高负载的进程

    方法1:使用iotop工具这是一个python脚本工具,使用方法如:iotop -o方法2:使用工具dmesg使用dmesg之前,需要先开启内核的IO监控:echo 1 >/proc/sys/v ...

  4. Mybatis中的update动态SQL语句

    Mybatis中的CRUD操作(增删改查)中,简单的SQL操作比较直观,如查找操作: <select id="findBySrcId" resultMap="ent ...

  5. （最小生成树） Networking -- POJ -- 1287

    链接: http://poj.org/problem?id=1287 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7494 ...

  6. （网络流） Sabotage -- UVA -- 10480

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#problem/J 代码: #include<cstdio> ...

  7. 团队项目第六周——Alpha阶段项目复审

    排名 队名 项目名 优点 缺点 1 大猪蹄子队 四六级背单词游戏 功能开发出来了,界面简洁美观. 功能的确开发出来了,但是还未完成整个程序.不过考虑到开发时长问题,可以理解.页面还是比较简洁,但是测试 ...

  8. ECG心电图数据1

    最近在写一篇基于小波变换的ECG信号压缩算法的论文,遇到了怎样获取ECG信号测试数据的问题,在百度和专业论坛里搜索了一番,发现也有很多朋友为此发愁.现在论文写好了,投稿中,顺便也把怎样获取和处理ECG ...

  9. VS2012 中不能安装ARCGIS 10.0 SDK的解决方法

    问题描述 在ARCGIS 安装SDK时 就会出错   原因是ARCGIS SDK 10.0只能在VS2010中安装,因为我本机是安的VS2012所以安装不成功.     解决方法 一,在注册表中HKE ...

  10. bootstrap实现左侧图片右侧文字布局

    效果图 代码 通过class="media-left"来控制相对位置 <!DOCTYPE html> <html> <head lang=" ...