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 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php防止用户重复提交表单
2015/11/02 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP多维数组排序array详解
2017/11/21 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python实现Adapter模式实例代码
2018/02/09 Python
python实现C4.5决策树算法
2018/08/29 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
三万活动总结
2014/04/28 职场文书
教师求职信范文
2014/05/24 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
绵山导游词
2015/02/05 职场文书
关于保护环境的建议书
2019/06/24 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers