Jquery 动态循环输出表格具体方法


Posted in Javascript onNovember 23, 2013

 实现功能:
1、有一个同学叫我实现一个这样的功能就像PHP,在表单中输入数字,然后网页就出现相应的数量;如果是PHP的话就简单多了,Jquery实现还是第一个,就开始狂的实验,最后还是实现了(知识点:Jquery创建节点、获取表单的值、循环语句)
Jquery代码:

 <script type="text/javascript" language="javascript">
$(function(){
$("#btn").click(function(){ //选择ID为btn的元素,添加点击事件
var result = $("input[name='text']").val();  //获取name为'text的文本框的值,并定义为变量result
$("div").remove(".abc"); //作用是:每次执行时就把含有.abc这个类的div删除;for(i=1;i<=result;i++){    //for循环,定i=1,每次循环就加1; 当i的值由1循环到等于result的值一样时(即“文本框的name='text'的值”)就停止循环
var createobj = $("<div class='abc'>创建的节点</div>"); //把div定义为变量createobj
$("body").append(createobj); //把createobj这个变量追加到html中的'body'里
}
});
});
</script>

HTML代码:
<body>
<input type="text" id="text" name="text" />
<input type="button" id="btn" value="确定" /></body>

CSS代码:
<style>
.abc {height:50px;width:50px; margin:20px;background:#ccc;}
</style>
Javascript 相关文章推荐
网上抓的一个特效
May 11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
javascript中json基础知识详解
Jan 19 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 #Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 #Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 #Javascript
js获取电脑分辨率的思路及操作
Nov 22 #Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 #Javascript
Mac/Windows下如何安装Node.js
Nov 22 #Javascript
javascript Event对象详解及使用示例
Nov 22 #Javascript
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python正则简单实例分析
2017/03/21 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python八皇后问题的解决方法
2018/09/27 Python
python实现flappy bird游戏
2018/12/24 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
铭立家具面试题
2012/12/06 面试题
在校硕士自我鉴定
2014/01/23 职场文书
内勤主管岗位职责
2014/04/03 职场文书
户籍证明模板
2014/09/28 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2014年度个人总结范文
2015/03/09 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
《海上日出》教学反思
2016/02/23 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL