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

前端技术 2023/09/05 JavaScript
 实现功能：
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>

本文地址：https://www.stayed.cn/item/12817

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案