Jquery 动态循环输出表格具体方法_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>

时间: 2024-07-30 21:28:33

Jquery 动态循环输出表格具体方法_jquery的相关文章

jQuery动态修改超链接地址的方法_jquery

本文实例讲述了jQuery动态修改超链接地址的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: <a id="jb51" href="http://www.haotu.net">好图网</a> 通过jQuery更换此超级链接的链接地址为http://www.jb51.net,代码如下: $("button").click(function(){ $("#jb51").attr(&quo

JQuery 动态生成Table表格实例代码_jquery

JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo

jQuery动态背景图片效果实现方法_jquery

本文实例讲述了jQuery动态背景图片效果实现方法.分享给大家供大家参考.具体如下: 这里把背景图片按照1.jpg - 20.jpg放到目录里,jQuery会随机调用这些图片作为背景 $(document).ready(function(){ bgImageTotal=20; randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1; imgPath=('/my/image/path/'+randomNumber+'.jpg'); $

jquery动态增加删减表格行特效_jquery

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none"> <tbody> <tr> <td height="30"

jquery动态添加元素事件失效问题解决方法_jquery

今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(".x .y").click(function)...失效问题. 刚开始网上找到了用live函数,方法如下: 事件绑定:$(".x .y").click(function) 需改为: 复制代码 代码如下: $(".x .y").live('click',function); 但是由于1.8版本后live这种方法不再支持,所以需要用下述jquery中on方法解决脚本动态添加

jQuery动态修改字体大小的方法【测试可用】_jquery

本文实例讲述了jQuery动态修改字体大小的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin:0; padding:0; } .msg

jQuery实现html表格动态添加新行的方法_jquery

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

jQuery操作动态生成的内容的方法_jquery

本文实例讲述了jQuery操作动态生成的内容的方法.分享给大家供大家参考,具体如下: 由于jQuery是页面一加载获取页面元素的,后期动态生成的元素,通过$("#xxxx")获取不到,需要用原始的js语句来获取: document.getElementById("xxx").value 对于动态生成的元素,bind绑定的事件 也无法触发,需要通过jQuery提供的另外一个方法 .live() 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()

JQuery实现动态添加删除评论的方法_jquery

本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">