DOM操作与实例

 删除节点 :removeChild   删除节点
            父节点.removeChild("子节点");
创建节点: 创建元素节点    createElement("元素节点名称");
         创建属性节点    createTextNode("文本的内容");
         创建属性节点    createAttribute("属性名");
            
添加节点  appendChild(创建好的元素节点或者文本节点);    
        table(节点名).appendChild(新创建的节点);    
        
设置属性

        节点名.setAttribute(属性名,属性值);


可编辑表格实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .input{
            color:#999;
            font-size:12px;
            background-color:#FF9;
            width:100px;    
            height:20px;
        }
    .delete{
            background-color:#F99;    
        }

</style>
</head>

<body>
<table width="200" border="0" bgcolor="#00FF66">
  <tr>
    <td height="426" valign="top">
    <table width="290" border="1" bgcolor="#FFFF33" id="left">
  <tr>
    <th scope="col" >姓名</th>
    <th scope="col" >性别</th>
    <th scope="col" >年龄</th>
    <th scope="col" >电话</th>
    <th scope="col" >操作</th>
  </tr>
</table>

    </td>
    <td><table width="236" border="0">
  <tr>
    <td width="61" height="66">姓名:</td>
    <td width="165"><input type="text" value="悟空" id="name" class="input"></td>
  </tr>
  <tr>
    <td height="70">性别:</td>
    <td><input type="text" value="女" id="sex" class="input"/></td>
  </tr>
  <tr>
    <td height="60">年龄</td>
    <td><input type="text" value="2000" id="age" class="input"></td>
  </tr>
  <tr>
    <td height="71">电话</td>
    <td><input type="text" value="1258059213" id="phone" class="input"></td>
  </tr>
    <tr>
    <td height="22" colspan="2" align="right"><input type="button" value="提交" οnclick="tijiao()"></td>
  </tr>
</table>

    </td>
  </tr>
</table>
<script>
var focu=0;
//获取表单值
function tijiao(){
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var sex = document.getElementById("sex").value;
            var phone = document.getElementById("phone").value;
            create(name,age,sex,phone);
        }
        
        
//获取tab节点
var tab = document.getElementById("left");
//将获取的表单值添加到表格中
function create(name,age,sex,phone){
        //创建tr节点
        var tr = document.createElement("tr");
        //添加tr节点
        tab.appendChild(tr);
            for(var j=1; j<=5; j++){
                    //创建td节点
                    var td = document.createElement("td");
                    switch(j){
                        case 1:
                            //创建文本节点
                            var text = document.createTextNode(name);
                        break;
                        case 2:
                            //创建文本节点
                            var text = document.createTextNode(sex);
                        break;
                        case 3:
                            //创建文本节点
                            var text = document.createTextNode(age);
                        break;
                        case 4:
                            //创建文本节点
                            var text = document.createTextNode(phone);
                        break;
                    }
                    
                    if(j==5){
                            //创建元素节点input按钮,并添加属性
                            var text =  document.createElement("input");
                            text.setAttribute("type","button");
                            text.setAttribute("value","删除");
                            text.setAttribute("id","id"+tab.childNodes.length);
                            text.setAttribute("class","delete");
                            text.setAttribute("onclick","del(this.id)");
                        }else{
                            //给td添加onclick属性
                            td.setAttribute("onclick","updateBefore(this.id)");
                            td.setAttribute("id","t"+j+"d"+tab.childNodes.length);
                            }
                        td.appendChild(text);
                        tr.appendChild(td);
            }
}

//删除信息
function del(th){
        //获取父标记
        var parent = document.getElementById(th).parentNode.parentNode;
        parent.parentNode.removeChild(parent);
    }


//更新前
function updateBefore(td_id){
    if(focu==1){ }else{
        //获取选中的节点
        var prinode = document.getElementById(td_id);
        //获取该节点中的信息,并且保存在删除
        var pritext = prinode.innerHTML;  prinode.innerHTML="";
        //创建input节点
        var inp1 = document.createElement("input");
        //向获取的节点中添加input节点
        prinode.appendChild(inp1);
        inp1.setAttribute("value",pritext);  
        inp1.setAttribute("id",td_id+"new");
        inp1.setAttribute("onblur","update(this.id)");
        inp1.setAttribute("onfocus","onfocu()");  
        inp1.style.width="100px";   
        //将input框获取焦点
        document.getElementById(td_id+"new").focus();
        }
    }
    
//更新
function update(inputid){
        //使更新可以用
        onblur();
        //获取该节点的value值
        var value = document.getElementById(inputid).value;  
        //将新的信息添加到原来的td中,先将该标记的父标记获取到
        var p1 = document.getElementById(inputid).parentNode.id;
        document.getElementById(p1).innerHTML=value;
        //删除input节点
        try{
        var aa = document.getElementById(inputid);
        aa.parentNode.removeChild(aa);
        }catch(e){ }

    }
    
//检测更新时的onclick时间,如果onclick触发了就不能再点击了否则会产生错误,所以用一个全局变量来判断
function onfocu(){
        focu=1;
    }
function onblur(){
        focu=0;  
    }

</script>
</body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值