示例代码

<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. 21天学通C++学习笔记（四）：数组和字符串

    1. 数组 概念 是一组元素 这些元素是相同的数据类型 按顺序存储到内存中 目的是避免在业务需要时去重复声明很多同类型的变量 初始化 分别初始化:int i [5] = {1,2,3,4,5}; 全部 ...

  2. vs2015 使用 Eazfuscator.NET 3.3

    出现问题: Unable to cast object System.Xml.XmlComment’ to type ‘System.Xml.XmlElement’ 解决办法: 打开 *.csproj ...

  3. Nginx 进行性能配置

    总所周知,网络上我们购买的服务器的性能各不相同,如果采用 Nginx 的默认配置的话,无法将服务器的全部性能优势发挥出来,我们应该选择适合自己需求的配置. 当我们默认安装后 Nginx 后,我们便得到 ...

  4. 洛谷P4009 汽车加油行驶问题（分层最短路）

    传送门 说好的网络流24题呢……上次是状压dp,这次怎么又最短路了…… 不过倒是用这题好好学了一下分层图最短路 把每一个位置$(x,y)$,油量剩余$k$表示为一个状态,然后转化成一个$n$进制数,这 ...

  5. python创建virtualenv虚拟环境

    pip install virtualenv virtualenv env_py36_crawl env_py36_crawl\Scripts\activate deactivate pip free ...

  6. P3230 [HNOI2013]比赛

    $ \color{#0066ff}{ 题目描述 }$ 沫沫非常喜欢看足球赛,但因为沉迷于射箭游戏,错过了最近的一次足球联赛.此次联 赛共N支球队参加,比赛规则如下: (1) 每两支球队之间踢一场比赛. ...

  7. P2645 斯诺克 题解

    P2645 斯诺克 题目背景 镇海中学开设了很多校本选修课程,有体育类.音乐类.美术类.无线电测向.航空航海航天模型制作等,力争使每位学生高中毕业后,能学到一门拿得出手的兴趣爱好,为将来的终身发展打下 ...

  8. 8、C++指针和自由存储空间

    8.C++指针和自由存储空间 计算机程序在存储数据时必须跟踪3中基本属性. 信息存储在何处 存储的值为多少 存储信息是什么类型. 指针是 一个变量,其存储的是值得内存地址 对于常规变量的地址,只需要对 ...

  9. js 的常用选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. kibana安装汉化包

    kibana安装汉化包其实很简单!但要找到汉化包可能就很麻烦了.我这里提供了6.2的版本的汉化包!至于能不能在其他版本用,我就没试过了.但6.2的kibana本人亲测.没问题!!!! 下载——解压.这 ...