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编程语言的编码规范
Oct 21 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
php中如何执行linux命令详解
2018/11/06 PHP
Javascript 继承实现例子
2009/08/12 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
小程序使用分包的示例代码
2020/03/23 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python列表使用实现名字管理系统
2019/01/30 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
详解python播放音频的三种方法
2019/09/23 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
入党转预备思想汇报
2014/01/07 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
无犯罪记录证明
2014/09/19 职场文书
学习保证书
2015/01/17 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python