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实现代码
May 23 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python读取excel表格生成erlang数据
2017/08/26 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
高二英语教学反思
2016/03/03 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL