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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
Vue SSR 组件加载问题
May 02 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
vue组件的路由高亮问题解决方法
May 11 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语法(1)
2006/10/09 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python logging模块原理解析及应用
2020/08/13 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
中英文自我评价语句
2013/12/20 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
西安大雁塔导游词
2015/02/10 职场文书
好好学习保证书
2015/02/26 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server