DOM操作与实例

最新推荐文章于 2022-08-13 22:00:37 发布

王浩

最新推荐文章于 2022-08-13 22:00:37 发布

阅读量664

点赞数

分类专栏： js 文章标签： function input border class button xhtml

本文链接：https://blog.csdn.net/youngerhao/article/details/7304400

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

删除节点：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>