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>
<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如何实现模糊搜索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了jquery 校验中国身份证号码实例详解的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了多种jQuery绑定事件的实现方式，分享了jQuery防止重复绑定事件的解决方法，感兴趣的小伙伴们可以参考一下2016-06-06
jquery.cookie.js实现用户登录保存密码功能的方法
这篇文章主要介绍了jquery.cookie.js实现用户登录保存密码功能的方法,结合实例形式详细分析了jquery.cookie.js插件操作cookie实现保存用户登录信息的相关技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了Jquery实现多个表格的全选复选框功能方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了简单的jQuery banner图片轮播实例代码的相关资料,需要的朋友可以参考下2016-03-03
谈谈Jquery ajax中success和complete有哪些不同点
jquery ajax中success和complete有哪些不同点呢？大家都了解吗，接下来通过本篇文章给大家介绍jquery ajax中success和complete的不同点，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了EasyUI加载完Html内容样式渲染完成后显示的相关资料,需要的朋友可以参考下2016-07-07
这里给大家分享几段JQuery提示效果的代码，非常的简单实用，有需要的小伙伴直接拿走吧2014-11-11
最新评论