dom操作

最新推荐文章于 2024-08-10 16:15:00 发布

crazywolf

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量109

点赞数

分类专栏： Js 文章标签： function javascript table input button border

Js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一、DOM 动态添加元素以及删除元素示例

<html>
   <head>
       <title>DOM-动态添加和删除元素</title>
       <style type="text/css">
           body,td,caption,input{
               font-size:12px;
           }
       </style>
       <script language="javascript">
           var count =0;
           //添加新用户的操作
           function addNewUser(){
               //得到文本框对象
               var objName = document.getElementById('name');
               if(objName.value==""){
                   alert("用户名不能为空！");
                   objName.focus();
                   return;
               }else{
                   count++;
                   //先创建行tr
                   var row = document.createElement("tr");
                   //设置行对象的ID属性为用户输入的用户名称
                   row.setAttribute("id",objName.value+count);

                   //创建td对象
                   var column = document.createElement("td");
                   //td对象下添加子节点 - 内容 TextNode 对象
                   column.appendChild(document.createTextNode(objName.value));
                   //row对象将td对象添加为子节点对象
                   row.appendChild(column);

                   //再创建删除按钮
                   var delBtn = document.createElement("input");
                   //类型
                   delBtn.setAttribute("type","button");
                   //文本
                   delBtn.setAttribute("value","Delete");

                   //设置对象的事件处理 - 所调用的函数
                   var name = objName.value+count;
                   delBtn.οnclick= function(){delUser(name);};

                   column = document.createElement("td");
                   column.appendChild(delBtn);

                   //行对象添加
                   row.appendChild(column);
                   //添加这一行到tbody中
                   document.getElementById('userList').appendChild(row);
                   objName.value="";
               }
           }
           //删除元素
           function delUser(name){
               if(name!=null){
                   var objRow = document.getElementById(name);
                   var objTBODY = document.getElementById("userList");
                   //删除
                   objTBODY.removeChild(objRow);
               }
           }
       </script>
   </head>
   <body>
       <table align="center" width="40%" border="1" cellspacing="0">
           <caption align="center">动态添加用户</caption>
           <tr>
               <td>添加新的用户名</td>
               <td>
                   <input type="text" id="name">  <input type="button" value="添加" onClick="addNewUser()">
               </td>
           </tr>
           <tr>
               <td colspan="2">用户信息</td>
           </tr>
           
           <tbody id="userList"></tbody>
       </table>
   </body>
</html>

第二、操作实例

<html>
   <head>
       <title>DOM 文档</title>
       <script language="javascript">
           //加载数据
           function loadDatas(){
               //创建一个H3对象
               var h3 = document.createElement("h3");
               //设置属性对齐方式
               h3.setAttribute("align","center");
               //H3文本对象
               var h3Text = document.createTextNode("DOM Document Object Model");
               h3.appendChild(h3Text);
               //添加至body对象中
               document.body.appendChild(h3);

               //创建HR水平线
               var hr = document.createElement("hr");
               document.body.appendChild(hr);

               //创建表格对象
               var table = document.createElement("table");
               table.setAttribute("align","center");
               table.setAttribute("width","50%");
               table.setAttribute("border",1);

               //添加至body对象中
               document.body.appendChild(table);

               //表格对象添加caption对象
               var caption = table.createCaption();
               caption.appendChild(document.createTextNode("Student Infomation"));

               //创建列标题对象
               var head = table.createTHead();
               //列标题行
               var headRow = head.insertRow(0);
               headRow.setAttribute("align","center");
               headRow.setAttribute("bgColor","#bbbddd");
               //列标题行对象创建单元格对象
               var firstCell = headRow.insertCell(0);
               firstCell.appendChild(document.createTextNode("ID"));
               //等价于
               headRow.insertCell(1).appendChild(document.createTextNode("NAME"));
               headRow.insertCell(2).appendChild(document.createTextNode("Grade"));
               headRow.insertCell(3).appendChild(document.createTextNode("Class"));

               var firstRow = table.createTHead();
               var row1 = firstRow.insertRow(1);
               row1.insertCell(0).appendChild(document.createTextNode("1001"));
               row1.insertCell(1).appendChild(document.createTextNode("张三"));
               row1.insertCell(2).appendChild(document.createTextNode("S2"));
               row1.insertCell(3).appendChild(document.createTextNode("T203"));

               var secondRow = table.createTHead();
               var row2 = secondRow.insertRow(2);
               row2.insertCell(0).appendChild(document.createTextNode("1002"));
               row2.insertCell(1).appendChild(document.createTextNode("李四"));
               row2.insertCell(2).appendChild(document.createTextNode("S1"));
               row2.insertCell(3).appendChild(document.createTextNode("T107"));

               var thirdRow = table.createTHead();
               var row3 = firstRow.insertRow(3);
               row3.insertCell(0).appendChild(document.createTextNode("1003"));
               row3.insertCell(1).appendChild(document.createTextNode("王五"));
               row3.insertCell(2).appendChild(document.createTextNode("Y2"));
               row3.insertCell(3).appendChild(document.createTextNode("T316"));
           }
       </script>
   </head>
   <body onLoad="loadDatas()">

   </body>
</html>