jQuery 表格自动增加

<!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:800px; margin:50px auto; border-collapse:collapse; border-spacing:0; }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:100%; height:100%; padding:5px 0; border:0 none; }table td input:focus { box-shadow:1px 1px 3px #ddd inset; outline:none; }</style><script type="text/javascript">var k = {};//alert(typeof k);var a ={id:1,name:'huangxiaoxin',description:'just believe in myself'};//alert(a.description);</script><body><table id="count"><tr><th>序号</th><th>姓名</th><th>金额[USD]</th><th>时间</th><th>项目</th><th>单位</th><th>备注</th></tr><tr><td>1</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></tr></table><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></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 = 1, eEle = '';oTable.on('click', function(e){var target = e.target,oTr = $(target).closest('tr');if(oTr.index() == oTable.find('tr').last().index()){iNum++;eEle = oTr.clone();eEle.find('td').eq(0).text(iNum);}oTable.append(eEle);});});</script></body></html>

jQuery 表格自动增加相关推荐

jquery 表格自动拆分（方便打印）插件-printTable
/** * jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak ...
生成固定长度的序列号，excel表格自动增加
=LEFT(A1,8)&REPT("0",8-LEN(DEC2HEX(HEX2DEC(RIGHT(A1,8))+1)))&DEC2HEX(HEX2DEC(RIGHT ...
jquery表格自动补全插件——datagrid
①在页面中创建一个或多个表格,设定表头,给每一个th添加一个field属性,属性值与后端数据名字相同 <table> <thead> & ...
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击"添加输入框"按钮时,就会自动添加一行下 ...
计算机word如何插入新列表,电脑word文档中怎么给表格自动添加序号？怎么增加表目录...
电脑word文档中怎么给表格自动添加序号?怎么增加表目录腾讯视频/爱奇艺/优酷/外卖充值4折起我们看一篇word文件的时候,如果篇幅比较长而表格又比较多的话,一般会给这篇word设置一个表目录. ...
html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
Jquery 表格插件DataTables
[转]Jquery 表格插件DataTables 博客分类: Jquery jquerydatatablesjavascript 1.特性可变长度分页: 动态过滤: 多列排序,带数据类型检测功能: ...
25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...

jQuery 表格自动增加

jQuery 表格自动增加相关推荐

最新文章

热门文章