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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Node.js JSON模块用法实例分析
Jan 04 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 array_flip() 删除数组重复元素
2009/01/14 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
jquery json 实例代码
2010/12/02 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
微信小程序入门教程
2016/11/18 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python操作gmail实例
2015/01/14 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python获取栅格点和面值的实现
2020/03/10 Python
python中time包实例详解
2021/02/02 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
食品厂厂长岗位职责
2014/01/30 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python