jquery创建表格(自动增加表格)代码分享


Posted in Javascript onDecember 25, 2013
<!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>
<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>

运行看效果吧

Javascript 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
js实现碰撞检测
Jan 29 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 #Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 #Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 #Javascript
JS中如何设置readOnly的值
Dec 25 #Javascript
简体中文转换繁体中文(实现代码)
Dec 25 #Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 #Javascript
append和appendTo的区别以及appendChild用法
Dec 24 #Javascript
You might like
PHP json_decode函数详细解析
2014/02/17 PHP
php遍历目录方法小结
2015/03/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
javascript验证身份证号
2015/03/03 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python遍历数组的方法小结
2015/04/30 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Ajax的工作原理
2015/12/04 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
北京大学自荐信范文
2014/01/28 职场文书
技校毕业生自荐书
2014/05/23 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年团委工作总结
2014/11/13 职场文书
接待员岗位职责
2015/02/13 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
利用python做数据拟合详情
2021/11/17 Python