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 相关文章推荐
div模拟选择框示例代码
Nov 03 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
详解用node-images 打造简易图片服务器
May 08 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
js实现录音上传功能
Nov 22 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循环输出数据库内容的代码
2008/05/24 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
简单介绍python封装的基本知识
2019/08/10 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
答谢会策划方案
2014/05/12 职场文书
法定代表人身份证明书
2014/09/10 职场文书