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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JS继承用法实例分析
Feb 05 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
基于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使用header()输出图片缓存实例
2014/12/09 PHP
php事件驱动化设计详解
2016/11/10 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python3 集合set入门基础
2020/02/10 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
海量信息软件测试笔试题
2015/08/08 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
护士辞职信模板
2014/01/20 职场文书
安全生产承诺书范文
2014/05/22 职场文书
村党支部书记承诺书
2014/05/29 职场文书
电子专业求职信
2014/06/19 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
初一军训感言
2015/08/01 职场文书
保外就医申请书范文
2015/08/06 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python