DOM节点，与可编辑表格

最新推荐文章于 2023-04-28 21:12:11 发布

coder_up

最新推荐文章于 2023-04-28 21:12:11 发布

阅读量844

点赞数

文章标签： function input border class 文档 button

本文链接：https://blog.csdn.net/wjc19911118/article/details/7317329

版权

1、dom document object   model 文档对象模型
   可以将标记文档装换为对象，每一个标签页能转换为对象
   dom为我们提供更多操作这些对象的属性和方法


2、bom   browser object   model   窗口对象模型
       窗口对象模型包括文档对象模型以及窗口处可见区域外本身的一些对象
       （location   history   screen）


3、document.getElementById()   获取单个对象
   document.getElementsByName 获取网页中name属性对象
   document.getElementsByTagName 获取网页中标签名称

4、判断是否有子节点
   node.firstVhild    返回第一个节点
   node.lastChild       返回最后一个节点
   node.parentNode       返回父节点
   node.childNodes     返回节点数组
   node.hasChildNodes() 判断是否有子节点   返回值true , false

   node.tagName    获取node元素的名称如果不是元素节点则不可以使用该属性

5、dom访问
   1、现获取父对象
   2、在获取子对象进行获取
       ById ----> ByTagName


-----------------------------------------------
关于几个常见的属性
       nodeName   节点名称
       nodeValue 节点值
       nodeType   节点类型
   元素类型节点类型
   元素       1
   属性       2
   文本       3
   注释       8
   文档       9
node.firstChild == node.childNodes[0]
node.lastChild == node.childNodes[node.childNodes.length-1]

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>