示例代码

<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. 「BZOJ 5188」「Usaco2018 Jan」MooTube

    题目链接 luogu bzoj \(Describe\) 有一个\(n\)个节点的树,边有权值,定义两个节点之间的距离为两点之间的路径上的最小边权 给你\(Q\)个询问,问你与点\(v\)的距离大于等 ...

  2. web静态资源的访问(笔记)

    1.在web-inf外的静态资源访问: 三种方式: 2.访问web-inf内的静态资源: 使用请求转发的方式访问web-inf静态资源(重定向相当于在浏览器输入,无法访问) 参考:https://bl ...

  3. javascript 数组排序

    var arr=[1,2,3,5,10,4,2,19,2,0]; alert(arr);//[1,2,3,5,10,4,2,19,2,0] arr.sort(function (a, b) {//升序 ...

  4. 并不能来一发50AC

    本来想来一发50AC嗨一下 然后发现只有40+ 算了放弃了..

  5. 用python实现按权重对N个数据进行选择

    需求:某公司有N个人,根据每个人的贡献不同,按贡献值给每个人赋予一个权重.设计一种算法实现公平的抽奖. 需求分析:按照权重对数据进行选择. 代码实现: 1 def fun(n,p): 2 " ...

  6. #首行输入数n，接下来输入n行数，以空格隔开

    #首行输入数n,接下来输入n行数,以空格隔开 n = int(raw_input())# print nL = []for i in range(n): L.append([int(x) for x ...

  7. 小白如何将代码上传到github上？

    网上已经有很多关于这个的教程,有一步步操作的,但有些感觉已经颇旧了.现在更新一个最新版的github小白教程.尽管以后此教程也会变成旧的,至少在这一段时期,本文还是最新的.就按照github官网上教程 ...

  8. MyBatis配置文件mybatis-config.xml

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...

  9. 2B - Amy

    数据范围是18位,把每一位加起来的和最多9*18 = 162 所以只需考虑n-162 - n的数即可,暴力解决 #include <iostream> using namespace st ...

  10. swarm1

    type 必选项,1表示container,2表示swarm stack,3表示compose stack title 必选项 description 必选项 image 必选项,该应用使用的dock ...