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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
vuex管理状态仓库使用详解
Jul 29 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处理json格式数据经典案例总结
2016/05/19 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jquery中attr和prop的区别分析
2015/03/16 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
个人找工作求职简历的自我评价
2013/10/20 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
神秘岛读书笔记
2015/07/01 职场文书
总经理年会致辞
2015/07/29 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL