示例代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

<title>动态生成控件</title>

<script>

var i=1;

function add()

{

    var top = document.getElementById("top");

    var div = document.createElement("div");

    var input = document.createElement("input");

    var del = document.createElement("input");

    div.innerHTML="学生" + i + " ";

    div.id = i; 

    input.type = "text";

    input.name = "v";

    input.value = "jihite";

    input.id = "v" + i;

    del.type = "button";

    del.name = "d";

    del.value = "删除";

    del.id = 'd' + i;

    del.onclick = function remo()

        {

            alert("删除学生：" + input.value);

            top.removeChild(div);

        };

    i = i + 1;

    div.appendChild(input);

    div.appendChild(del);

    top.appendChild(div);

}

</script>

</head>

<body>

<div>

    <input type="button" onclick="add()" value="添加" />

</div>

<div id="top">

</div>

<div id="output">

</div>

</body>

</html>

效果

1. 开始页面

2. 点击添加按钮

3. 修改学生姓名

4. 点击删除

5. 删除后的页面

通过JavaScript动态生成html控件的更多相关文章

  1. 动态生成PictureBox控件，涉及：PictureBox控件和flowLayoutPanel面板

    一.概述 flowLayoutPanel面板是一系列控件的容器,有关详细的使用方法留待以后总结. 二.问题提出 问题提出:点击按钮,扫描指定文件夹并将其中的所有图片放在flowLayoutPanel面 ...

  2. 第二章实例：动态生成View控件例子---小球跟随手指滑动

    package mydefault.packge; import android.app.Activity; import android.content.Context; import androi ...

  3. form中动态生成Radiobutton控件

    public partial class GetLabelFields : Form { int tableCount; public GetLabelFields(AxMapControl axma ...

  4. WinForm用户控件、动态创建添加控件、timer控件--2016年12月12日

    好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3       0 0     用户控件: 通过布局将多个控件整合为一个控件,根据自己的需要进行修改,可对用户控件内的所有控件及控件属性进行修 ...

  5. Pyqt 动态的添加控件

    Pyqt 动态的添加控件 # -*- coding: utf-8 -*- from PyQt4.QtCore import * from PyQt4.QtGui import * import sys ...

  6. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  7. 袁创：使用反射动态调用ActiveX控件

    ■■■■前言 目前的基于.NET平台的软件研发中仍然存在大量的对COM及ActiveX控件的调用.使用C#调用ActiveX控件时一般是使用vs.net工具自动生成的互操作性程序集.这种方法操作简单, ...

  8. 使用反射动态调用ActiveX控件

    使用反射动态调用ActiveX控件 袁永福 2018-3-2 ■■■■问题描述: 目前的基于.NET平台的软件研发中仍然存在大量的对COM及ActiveX控件的调用.使用C#调用ActiveX控件时一 ...

  9. winform 用户控件、 动态创建添加控件、timer控件、控件联动

    用户控件: 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗 ...

随机推荐

  1. 1232: 买不到的数目 [DP、数学]

    1232: 买不到的数目 [DP.数学] 时间限制: 1 Sec 内存限制: 128 MB 提交: 21 解决: 10 统计 题目描述 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的 ...

  2. EL表达式的语法与应用

    EL(是Expression Language的缩写),使用EL对JSP输出进行优化,可以使得页面结构更加清晰,代码可读性高,也更加便于维护. EL表达式的语法: 语法:$(EL 表达式) $  和 ...

  3. Git 合并两个不同的仓库

    目录 第一步. 下载需要合并的分支 第二步. 添加需要合并远程仓库 第三步. 把base远程仓库中数据抓取到本仓库 第四步. checkount切换到base分支上,命名为 asf 第五步. 合并 总 ...

  4. CentOS 中查看软件的版本号

    CentOS  中查看软件的版本号 1. rpm 查看 [root@hadoop110 ~]# rpm -qa | grep mysql mysql-community-client--.el6.x8 ...

  5. Svn安装成功后的操作

    一.服务器端创建目录 在Svn服务器端创建一个用来保存客户端提交文件的文件夹 (我的路径是d:/Svn/App/book) 首先将Svn的服务端安装目录/bin 进行环境配置,以下操作是在进行环境配置 ...

  6. Luogu P1272 重建道路 树形DP

    刚才瞅了半天自己当初写的,终于瞅出来了...QWQ 设f[i][j]表示以i为根的子树,包含j个节点所需砍掉的最小边数 那么可知f[u][1]=u的度: 方程:f[u][j]=min(f[u][j], ...

  7. 网络寻路（思维+vector的应用）-----------蓝桥备战系列

    标题:网络寻路 X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一共有多少 ...

  8. UVA - 10817 状压DP

    题意:大白P95 本题比较特别的是状压两个集合并且进行转移,因此要分别处理当前集合只有1个老师/2个老师的记录(然后可O(1)得出0个老师的集合) 记忆化过了但是迭代式不能记忆超过2的之前的状态是怎样 ...

  9. HDU - 2604 矩阵快速幂 字符串递推 两种解法

    记dp[i]为长度i且符合题意的方案数,dp[n]就是解 符合方案的是不含fmf和fff子串的字符串 考虑如何从前面几项递推出后面第i项 (★表示存在生成的非法方案)←其实没啥用处 i=1时 m③ f ...

  10. VBS常用脚本及其解说一览

    取得本机IP strComputer = "." Set objWMIService = GetObject("winmgmts:\\" & strCo ...