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 相关文章推荐
JavaScript内核之基本概念
Oct 21 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
ES6基础之默认参数值
Feb 21 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
Vue+Element UI实现概要小弹窗的全过程
May 30 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
10 个经典PHP函数
2013/10/17 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
回顾Javascript React基础
2019/06/15 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python实现ip查询示例
2014/03/26 Python
anaconda如何查看并管理python环境
2019/07/05 Python
django和vue实现数据交互的方法
2019/08/21 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
大一自我鉴定范文
2013/10/04 职场文书
前台文员岗位职责及工作流程
2013/11/19 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
询价采购方案
2014/06/09 职场文书
医学生求职自荐书
2014/06/12 职场文书
个人总结与自我评价2015
2015/03/11 职场文书