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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
VUE重点问题总结
Mar 19 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python实现图片识别加翻译功能
2019/12/26 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python绘制动态水球图过程详解
2020/06/03 Python
简述python Scrapy框架
2020/08/17 Python
岗位竞聘演讲稿范文
2014/04/24 职场文书
调解书格式范本
2015/05/20 职场文书
个人道歉信大全
2019/04/11 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Mysql基础之常见函数
2021/04/22 MySQL
分享7个 Python 实战项目练习
2022/03/03 Python
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript