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 Discuz代码中的msn聊天小功能
May 25 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
使用JS获取SessionStorage的值
Jan 12 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 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
极典R601SW收音机
2021/03/02 无线电
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python中自定义函数的教程
2015/04/27 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
python字符串中的单双引
2017/02/16 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python 调用有道api接口的方法
2019/01/03 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
Django实现网页分页功能
2019/10/31 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
pygame实现弹球游戏
2020/04/14 Python
python实现批量转换图片为黑白
2020/06/16 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
UNIX文件系统分类
2014/11/11 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
毕业生实习证明
2014/09/19 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书