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 相关文章推荐
Javascript this 的一些学习总结
Aug 02 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
浅析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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python获得图片base64编码示例
2014/01/16 Python
python生成随机mac地址的方法
2015/03/16 Python
Python解惑之整数比较详解
2017/04/24 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python定义类self用法实例解析
2020/01/22 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
学校介绍信范文
2014/01/14 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
单位工作证明
2014/10/07 职场文书
房屋转让协议书
2014/10/18 职场文书
教师节座谈会主持词
2015/07/03 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers