DOM操作表格

最新推荐文章于 2024-08-06 12:58:11 发布

broccoli2

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量271

点赞数

分类专栏： javascript 文章标签： dom javascript

本文链接：https://blog.csdn.net/broccoli2/article/details/72081913

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>添加用户</title>
    </head>
    <body>
        <center>
            <br><br>
            添加用户:<br><br>
            姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <input type="text" name="tel" id="tel" /><br><br>
            <button id="addUser">提交</button>
            <br><br>
            <hr>
            <br><br>
            <table id="usertable" border="1" cellpadding="5" cellspacing=0>
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <th>email</th>
                        <th>电话</th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="deleteEmp?id=Tom">Delete</a></td>
                    </tr>
                    <tr>
                        <td>Jerry</td>
                        <td>jerry@sohu.com</td>
                        <td>8000</td>
                        <td><a href="deleteEmp?id=Jerry">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </center>
    </body>
    <script language="JavaScript">
     //dom结构绘制完毕,页面的所有关联的文件必须加载完毕(图片)
     window.onload=function(){  
          //<button id="addUser">提交</button>
          document.getElementById("addUser").onclick=function(){
/******************************************************************************************************/             
   //获取文本框的值
   /*
    * 姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <input type="text" name="tel" id="tel" /><br><br>
    */  

    var nameValue=document.getElementById("name").value;
    var emailValue=document.getElementById("email").value;
    var telValue=document.getElementById("tel").value;
/******************************************************************************************************/
   //创建td
   /*
    * <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="deleteEmp?id=Tom">Delete</a></td>
                    </tr>
    */
   //创建nametd
     var nameTd=document.createElement("td");
     var nameText=document.createTextNode(nameValue);
     nameTd.appendChild(nameText);

   //创建emailtd
     var emailTd=document.createElement("td");
     var emailText=document.createTextNode(emailValue);
     emailTd.appendChild(emailText);

   //创建teltd
     var telTd=document.createElement("td");
     var telText=document.createTextNode(telValue);
     telTd.appendChild(telText);

   //创建atd
     var aTd=document.createElement("td");

     var aElement=document.createElement("a");
     aElement.setAttribute("href","deleteEmp?id="+nameValue);
     var deleteText=document.createTextNode("Delete");
     aElement.appendChild(deleteText);
     aTd.appendChild(aElement);

/******************************************************************************************************/
  //创建tr
    var trElement=document.createElement("tr");

  //增加td到tr上
    trElement.appendChild(nameTd);
    trElement.appendChild(emailTd);
    trElement.appendChild(telTd);
    trElement.appendChild(aTd);

/******************************************************************************************************/
      //增加tr到table上
      //<table id="usertable" border="1" cellpadding="5" cellspacing=0>
         //<tbody>
      var tableElement=document.getElementById("usertable");

      //创建tbody,为了跨浏览器,要创建tbody
      var tbodyElement=document.createElement("tbody");
      tbodyElement.appendChild(trElement);

      //放置tbody到table上
      tableElement.appendChild(tbodyElement);

/******************************************************************************************************/
     //删除
      aElement.onclick=function(){
          //使网页的链接失效
          return delTr(aElement);
      }
/******************************************************************************************************/                
   }
}

/**
 * @param {Object} aElement
 */ 
function delTr(aElement){
   /*
    *               <tr>
                        <td>
                            Tom
                        </td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="deleteEmp?id=Tom">Delete</a></td>
                    </tr>
    */
    var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
    //alert("name   "+name)

    var flag=window.confirm("您真的要删除["+name+"]这个用户吗?");
    //alert(flag);

    // 点击"取消" 按钮
    if(!flag){
         //使网页的链接失效
        return false;
    }

    //删除
       //获取tbody
        var tbodyElement=aElement.parentNode.parentNode.parentNode;
       //获取tr
        var trElement=aElement.parentNode.parentNode;
       //删除
        tbodyElement.removeChild(trElement);
        //使网页的链接失效

        return false;
 }   
 </script>
</html>

broccoli2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添
复制链接

扫一扫

专栏目录