示例代码

<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. U盘安装Ubuntu 12.04成功后系统无法启动的原因及解决办法

    想搭建一个Linux开发环境,选择了ubuntu12.04长期支持版,采用u盘安装(Universal-USB-Installer做的启动),发现安装完成之后,拔掉u盘无法启动,插上u盘之后,可以重启 ...

  2. 分享我的第一个asp.net core开发过程

    .net core 这个东西感觉还是很不错的,学习了一下,并且做了一个微服务(IP地址查询服务) http://vju.cc/ip/ipquery 看上他的跨平台功能,所以就研究一下,中间有不少坑,有 ...

  3. CentOS7 搭建 python pypi 私有源

    (1)寻找可用的同步源,我选择的是中科大的源:http://rsync.mirrors.ustc.edu.cn (2)创建数据同步目录:/root/pypi(如果想存放到其他目录,可以通过软链接的方式 ...

  4. NSTimeZone时区

    前言 NSTimeZone 表示时区信息. 1.NSTimeZone 时区的创建 NSTimeZone *zone1 = [[NSTimeZone alloc] init]; // 根据时区名称创建 ...

  5. F题（水题）

    给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少.   例如: 1 7 6 3 1.i = 1, j = 3,对应的数为7 6 3,最大的数为7. ...

  6. 洛谷P4526 【模板】自适应辛普森法2（Simpson法）

    题面 传送门 题解 据说这函数在\(x>15\)的时候趋近于\(0\) 据说当且仅当\(a<0\)时积分发散 所以直接套自适应\(simpson\)吧-- //minamoto #incl ...

  7. 洛谷P1251 餐巾计划问题（费用流）

    传送门 不得不说这题真是思路清奇,真是网络流的一道好题,完全没想到网络流的建图还可以这么建 我们把每一个点拆成两个点,分别表示白天和晚上,白天可以得到干净的餐巾(购买的,慢洗的,快洗的),晚上可以得到 ...

  8. python学习之路---day12

    生成器和生成器表达式一:生成器 生成器实质上就是迭代器. 三种方式获取生成器: 01:通过生成器函数 02:通过各种推导式实现生成器 03:通过数据的转换也可以获取生成器 eg:普通函数 def fu ...

  9. enumerate函数

    enumerate(list):返回元组,带有索引值,常用用法: for i in enemerate(list): print(i)

  10. JSTL的核心标签

    JSTL的核心标签: .if: 语法:<c:if test="" var="" scope=""></c:if> 当 ...