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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
微信小程序上传图片实例
May 28 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 批量更新网页内容实现代码
2010/01/05 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
入职担保书范文
2014/05/21 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
高三教师工作总结2015
2015/07/21 职场文书
学生会工作感言
2015/08/07 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL