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中普通函数的使用介绍
Dec 19 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
JS闭包经典实例详解
Dec 20 Javascript
webpack项目使用eslint建立代码规范实现
May 16 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
Phpbean路由转发的php代码
2008/01/10 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PDO::quote讲解
2019/01/29 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
八年级音乐教学反思
2014/01/09 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
单位接收函格式
2015/01/30 职场文书
颐和园导游词
2015/01/30 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
羊脂球读书笔记
2015/06/30 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android