DOM动态增加控件

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>加法计算器</title>

    <script type="text/javascript">

        function Addvalue()

        {

            var txt1 = document.getElementById("text1").value;

            var txt2 = document.getElementById("text2").value;

            var txt3 = parseInt(txt2,10) + parseInt(txt1,10);

            var input = document.getElementById("result");

            input.value = txt3;

        }

        function AddNewButton()

        {

            var position = document.getElementById("divMain");

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

            input.value = "动态增加的按钮";

            input.type = "button";

            input.onclick = AddNewButton;

            position.appendChild(input);

        }

        function AddNewLink()

        {

            var position = document.getElementById("divMain");

            position.innerHTML = "<a href='htmlpagedom.html'>htmlpagedom.html</a>";

        }

        function AddThreeLink()

        {

            var position = document.getElementById("divMain");

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

            var data = {"百度":"http://baidu.com","新浪":"http://xinlang.cn","网易":"http://wangyi.com"};

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

            for (var key in data)

            {

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

                td.innerHTML = "<a href='" + data[key] + "'>" + key + "</a>";

                tr.appendChild(td);

            }

            table.appendChild(tr);

            position.appendChild(table);

        }

        function AddTable()

        {

            var position = document.getElementById("divMain");

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

            var data = { "百度": "http://baidu.com", "新浪": "http://xinlang.cn", "网易": "http://wangyi.com" };

            for(var key in data)

            {

                var tr =table.insertRow(-1);

                var td1 = tr.insertCell(-1);

                var td2 = tr.insertCell(-1);

                td1.innerText = key;

                td2.innerText = data[key];

                //tr.appendChild(td1);

                //tr.appendChild(td2);

                //table.appendChild(tr);

            }

            position.appendChild(table);

        }

        var WriteComment=function()//将textarea里的内容传进来

        {

            var table = document.getElementById("comment");

            var input = document.getElementById("nickname").value;

            var text = document.getElementById("commentplace").value;

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

            var td1 = tr.insertCell(-1);

            var td2 = tr.insertCell(-1);

            td1.innerText = input;

            td2.innerText = text;

            table.tBodies[0].appendChild(tr);

        }

    </script>

</head>

<body>

    <input type="text" id="text1" /><br/>

    <input type="text" id="text2" /><br/>

    <input type="button" value="相加" onclick="Addvalue()"/><br/>

    <input type="text" id="result" readonly="readonly"/>

    <div id="divMain"></div>

    <input type="button"onclick="AddNewButton()"value="添加新按钮"/><br/>

    <input type="button"onclick=" AddNewLink()"value="添加新链接"/><br/>

    <input type="button"onclick="AddThreeLink()"value="添加链接表" />

    <input type="button" onclick="AddTable()" value="添加新表" />

    <table id="comment">

        <thead>

            <td>猫猫：</td><td>这里有沙发快点抢啊！</td>

        </thead>

        <tbody>

        </tbody>

    </table>

    <font>昵称</font><input type="text" id="nickname"/>

    <font>评论</font><br/><textarea id="commentplace">

    </textarea>

    <input type="button"value="评论" onclick="WriteComment()"/>

    <hr/>

    <input type="button" onclick="alert(this.value)"value="click"/>

    <!--this 只能应用在本身函数内，不允许在外部函数使用-->

    <input type="button" onclick="alert(event.srcElement.value)" value="click" />

</body>

</html>

DOM动态增加控件的更多相关文章

android动态增加控件时控制样式的方法
在学习android的动画时,发现所谓的tween动画只是改变绘制效果并不改变原控件的位置时是颇为失望的,虽然3.0之后已经有了property animation,但是由于要兼容老版本的androi ...
LayoutInflater的动态增加控件
在实际开发中LayoutInflater这个类是非常有用的,它的作用类似于 findViewById(),不同点是LayoutInflater是用来找layout下xml布局文件. 而findView ...
DOM动态操纵控件案例
点击登陆显示登陆框 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head ...
在Extjs中动态增加控件
Ext.onReady(function () { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var aut ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
Jquery 动态追加控件并获取值
先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...
JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
winform导入导出excel，后台动态添加控件
思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...
Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

随机推荐

交换学生（Foreign Exchange,UVa10763)
题目描述: 解题思路: 开一个数组,读入一次交换两个数,如果最后数组不变,即符合匹配 #include<iostream> #include<cstdio> #include& ...
markdown语法介绍
1. 标题类每级标题用"# title"表示,共支持6级标题: 2. 段落类 1.建议用换行符控制: 2.用"<p></p>"控制: ...
Halcon和visionPro的比较
很多朋友会问到visionpro和halcon这两款机器视觉软件,到底学哪个好呢,今天重码网就给大家讲一讲: 首先比较下两者的优缺点: halcon: 提供的图像算法要比Visionpro多,也就是说 ...
词频统计 SPEC 20170914 1 1 1 1 1
功能1 小文件输入,为表明程序能跑,结果真实而不是迫害老五,请他亲自键盘在控制台下输入命令. #include<stdio.h> #include<string.h> #inc ...
UVALive - 6856 Circle of digits 后缀数组+二分
题目链接: http://acm.hust.edu.cn/vjudge/problem/82135 Circle of digits Time Limit: 3000MS 题意把循环串分割成k块,让 ...
sublime Remote_encoding cp1252
"remote_encoding": "cp1252",才能连接远程ftp
Java中的日志——Java.util.logging、log4j、commons-logging
Java中给项目程序添加log主要有三种方式,一使用JDK中的java.util.logging包,一种是log4j,一种是commons-logging.其中log4j和commons-loggin ...
Mybatis笔记二
一对一查询案例:查询所有订单信息,订单信息中显示下单人信息. 注意:因为一个订单信息只会是一个人下的订单,所以从查询订单信息出发关联查询用户信息为一对一查询.如果从用户信息出发查询用户下的订单信息则 ...
matlab isfield
isfield 函数功能:判断输入是否是结构体数组的域(成员). 调用格式: tf=isfield(S,'fieldname') 检查结构体S是否包含由fieldname指定的域,如果包含,返回逻辑1 ...
【bzoj4641】基因改造特殊匹配条件的KMP
题目描述如果两个长度相等的字符串,如果存在一种字符的一一映射,使得第一个字符串的所有字符经过映射后与第二个字符串相同,那么就称它们“匹配”.现在给出两个串,求第一个字符串所有长度等于第二个字符串的长 ...

DOM动态增加控件

DOM动态增加控件的更多相关文章

随机推荐

热门专题