HTML DOM添加信息

dom节点添加信息，点击按钮录入一条信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{width: 800px;margin: 30px auto;}
        table{width: 500px;border:1px solid #ddd;border-collapse: collapse; margin: 30px auto}
        tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
    </style>
</head>
<body>
    <div id="box">
        编号：<input id="txt1" type="text">
        姓名：<input id="txt2" type="text">
        住址：<input id="txt3" type="text">
        <button id="btn">添加</button>
    </div>
    <script type="text/javascript">
        var tab=document.createElement('table');
        tab.createCaption().innerHTML="学生调查表";

        var tr=createTH();//获取一行
        tab.appendChild(tr);//把行放在表格中

        //获取按钮
        var btn=document.getElementById('btn');
        //获取三个输入框节点。
        var txt1=document.getElementById('txt1');
        var txt2=document.getElementById('txt2');
        var txt3=document.getElementById('txt3');

        //鼠标点击事件
        btn.onclick=function(){
            //取出输入框里面的值
            var v1=txt1.value;
            var v2=txt2.value;
            var v3=txt3.value;
            // alert(v1,v2,v3);
            if(v1==''||v2==''||v3==''){
                alert("请把信息填写完整");
                return;//如果输入框里面没内容,内容为空, 则结束函数。下面的代码不执行
            }
            //把获取的输入框值传给表格作为内容显示
            var tr=createTD(v1,v2,v3);
            //把行添加到表格中
            tab.appendChild(tr);

            //把表格添加到body中
            document.body.appendChild(tab);
            //点击添加过后，清空输入框的值   ""与" "不一样
            txt1.value="";
            txt2.value="";
            txt3.value="";
        }

        //创建表头行
        function createTH(){
            var tr=document.createElement('tr');
            tr.insertCell().innerHTML="编号";
            tr.insertCell().innerHTML="名字";
            tr.insertCell().innerHTML="年龄";
            tr.insertCell().innerHTML="操作";
            return tr;
        }

        //创建 普通行内容
        function createTD(id,name,addre){
            //创建行
            var tr=document.createElement('tr');
            //创建列
            tr.insertCell().innerHTML=id;
            tr.insertCell().innerHTML=name;
            tr.insertCell().innerHTML=addre;

            //创建最后一列
            var td=tr.insertCell();//添加删除
            //超链接
            var l=document.createElement('a');
            l.href="#";
            l.innerHTML="删除";
            l.onclick=function(){
                if(confirm("是否删除？")){
                    //保存  行节点
                    var hang=this.parentNode.parentNode.parentNode;
                    //行节点的父节点表格
                    hang.parentNode.removeChild(hang);
                }
            }
            //把超链接放到 td最后一列中
            td.appendChild(l);
            //把列到一行中
            tr.appendChild(td);
            //把行返回给调用者
            return tr;
        }
    </script>
</body>
</html>

var v1=txt1.value;
txt1.value是拿输入框里的值
把文本框里的值赋值给变量v1，赋值语句。    
属性的设置：
    node.属性名=属性值
属性值的获取：
    node.属性名

<img src="../imgs/1.jpg" alt="" id="pic1">
    <img src="../imgs/2.jpg" alt="" id="pic2">
    <script type="text/javascript">
        //图片二的内容和图片一保持一致
        var img1=document.getElementById('pic1');
        var img2=document.getElementById('pic2');

        //属性的获取    pic1获取里面的src的值  *  把值赋给img2.src。
        img2.src=pic1.src;

把一个节点的属性节点值赋给=另个节点相当于与把属性节点赋值给=另个节点
例子：

var a="";
var b=" ";
if(a==b){
alert("等于");
}else{
    alert("不等");
 }

在这个例子里面有个问题就是在录入信息后清除输入框值的时候后
“”，“ ”
这两个是不一样的。一个是没有数据，一个是空格。

猜你喜欢