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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
json的使用小结
Jun 08 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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
一个多文件上传的例子(原创)
2006/10/09 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
python django model联合主键的例子
2019/08/06 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python try...finally...的实现方法
2020/11/25 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
JSF如何进行表格处理及取值
2012/08/06 面试题
高三生物教学反思
2014/01/25 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
前处理组长岗位职责
2014/03/01 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
创意广告词
2014/03/17 职场文书
纪检监察建议书
2014/05/19 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
退学证明范本3篇
2014/10/29 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Java实现多线程聊天室
2021/06/26 Java/Android