动态循环输出表格,动态循环输出表格具体方法

作者: 关于计算机  发布:2019-09-13

 达成效果与利益:
1、有二个同室叫本人达成叁个那样的效益就疑似PHP,在表单中输入数字,然后网页就涌出相应的数码;要是是PHP的话就大约多了,Jquery达成照旧首先个,就最初狂的试验,最后依然促成了(知识点:Jquery创造节点、获取表单的值、循环语句)
Jquery代码:

 完结效果与利益:

复制代码 代码如下:

1、有三个同桌叫笔者实现叁个这么的效益就如PHP,在表单中输入数字,然后网页就应际而生相应的数额;假诺是PHP的话就简单多了,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删除;

Jquery代码:

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 type="text/javascript" language="javascript">

});
});
</script>

$(function(){

HTML代码:

$("#btn").click(function(){ //选取ID为btn的成分,增加点击事件

复制代码 代码如下:

var result = $("input[name='text']").val();  //获取name为'text的文本框的值,并定义为变量result

<body>
<input type="text" id="text" name="text" />
<input type="button" id="btn" value="确定" />

$("div").remove(".abc"); //功效是:每回实行时就把含有.abc这么些类的div删除;

</body>

 

CSS代码:

for(i=1;i<=result;i++){    //for循环,定i=1,每回循环就加1; 当i的值由1循环到等于result的值同样时(即“文本框的name='text'的值”)就终止循环

复制代码 代码如下:

var createobj = $("<div class='abc'>创立的节点</div>"); //把div定义为变量createobj

<style>
.abc {height:50px;width:50px; margin:20px;background:#ccc;}
</style>

$("body").append(createobj); //把createobj那么些变量追加到html中的'body'里

您大概感兴趣的稿子:

  • jQuery完结表格行和列的动态增加与删除方法【测量试验可用】
  • 原生JS和JQuery动态增进、删除表格行的艺术
  • JQuery动态拉长和删除表格行的方法
  • JQuery完成表格动态扩张行并对新行加多事件
  • 根据jQuery的动态表格插件
  • 基于jquery的动态成立表格的插件
  • JQuery Ajax动态生成Table表格
  • jquery动态增添删除表格行的小例子
  • jQuery落成html表格动态拉长新行的办法
  • Jquery 动态变化表格示例代码
  • jQuery完结的简要动态拉长、删除表格效能示例

}

 

});

});

</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的话就轻松多了,...

本文由今晚开什么码发布于关于计算机,转载请注明出处:动态循环输出表格,动态循环输出表格具体方法

关键词:

上一篇:Callbacks完整意义代码详解
下一篇:没有了