Jquery 动态循环输出表格具体方法
更新时间：2013年11月23日 15:09:47 作者：
这篇文章主要介绍了Jquery 动态循环输出表格具体方法，有需要的朋友可以参考一下
实现功能：
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>
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>
相关文章
再说AutoComplete自动补全之实现原理,这里以asp.net后台为主，考虑到性能最好是生成xml并入缓存。2011-11-11
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
JQuery在IE8兼容性视图模式下操作Select的Options的Bug在本文进行重现并给出详细的解决方法，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
jQuery中slideUp 和 slideDown 的点击事件
这篇文章主要介绍了jQuery中slideUp 和 slideDown 的点击事件的相关资料,需要的朋友可以参考下2015-02-02
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
下面小编就为大家带来一篇Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
日期函数在程序开发中是一个重要的工具,js也提供了Date()函数,如获取当前时间,当前年月,已经系统时间的毫秒数。2016-10-10
今天向大家演示如何通过JQuery框架为空白HTML文档加载从XML文件读取的数据并显示出来。我们将会主要用到JQuery自带过程$.get 。2009-12-12
这篇文章主要介绍了JQuery事件委托原理与用法,结合具体实例形式分析了jQuery事件委托相关概念、原理及使用技巧,需要的朋友可以参考下2019-05-05
下面小编就为大家带来一篇jQuery获取table表中的td标签(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本篇文章主要是对判断jQuery当前元素是隐藏还是显示的示例代码进行了介绍，需要的朋友可以过来参考下2016-11-11
这篇文章主要介绍了jQuery实现点击旋转，再点击恢复初始状态动画效果,结合实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-12-12
最新评论