JavaScript实验一(添加节点，删除节点)

最新推荐文章于 2020-10-13 18:35:00 发布

awv94517

最新推荐文章于 2020-10-13 18:35:00 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Joke-Jay/p/6719832.html

版权

静态html页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #tid{border-collapse:collapse;}/*这个样式是 为表格设置单线条 #tid  是id选择器  下面表格中直接id="tid"就能够使用这个样式 (.a 类选择器  class="a")*/
    </style>
</head>
<body>
<center>
    <table name="tname"  id="tid" border="1" cellpadding="10" cellspacing="2" >
        <tbody id="tbody">
            <tr bgcolor="#7fff00">
                <th>名字</th>
                <th>性别</th>
                <th>&nbsp</th>
            </tr>

            <tr>
                <td>
                    tom
                </td>
                <td>男</td>
                <td><a href="#">删除</a></td>
            </tr>

            <tr>
                <td>jay</td>
                <td>男</td>
                <td><a href="#">删除</a></td>
            </tr>

            <tr>
                <td>小明</td>
                <td>男</td>
                <td><a href="#">删除</a></td>
            </tr>
        </tbody>
    </table>
<h2>--------------------添加操作---------------------</h2>
    name:<input name="name" id="textname" size="10">
    male:<input name="male" id="textmale">
    <input name="submit" type="submit" value="添加">
</center>
</body>
</html>

静态页面效果：

通过使用JavaScript代码使该页面完成以下效果：

点击删除时弹窗确认(删除jay)

单击确定实现jay节点的删除

输入内容进行添加(添加节点)

单击添加内容添加至上边的表格中(添加一个节点)

同时保证这个刚添加的节点也能过正常实现删除

JavaScript代码：

    <script type="text/javascript">
        window.onload=function(){


            //获取所有的a节点
            var anodes=document.getElementById("tid").getElementsByTagName("a");
            for(var i=0;i<anodes.length;i++){//为每个a节点定义onclick处理事件
                anodes[i].onclick=function(){
                    shanchudaoimpl(this);//执行删除的函数 参数传的是this 表示当前操作的超链接
                }
            }

            //调用添加函数
            add();
        }

        //定义去字符函数
        function trim(text){
            var reg=/^\s*|\s*$/g;
            return text.replace(reg,"");
        }

        //删除函数实现
        function shanchudaoimpl(sc){
            //获取单击列 的父类的父类 tr
            var trnode=sc.parentNode.parentNode;
            //获取单击列的 前面的文本
            var textcontext=trnode.getElementsByTagName("td")[0].firstChild.nodeValue;
            textcontext=trim(textcontext);//去除前后的空格

            //现在已经得到了文本值
            var flag=confirm("删除" +textcontext +"的信息");
            if(flag){
                //执行删除  通过trnode得到父节点 然后删除
                trnode.parentNode.removeChild(trnode);
            }
        }

        //定义添加的函数
        function add(){
            //首先取得提交按钮节点  绑定onclick时间
            var submit=document.getElementsByName("submit")[0];
            submit.onclick=function(){
                //alert("提交")
                //首先获取对应的文本值
//                var name=document.getElementsByName("name")[0];//第二种 通过属性值 获取 这种方式  不经常使用  返回了是一个集合数组
//                var male=document.getElementsByName("male")[0];
//                alert(name.value);
//                alert(male.value);
//                var name=document.getElementsByTagName("input")[0];//第三种 通过标签名进行获取  放回的同样是一个数组
//                var male=document.getElementsByTagName("input")[0];
//                alert(name.value);
//                alert(name.value);


                var name=document.getElementById("textname");//第一种方式  通过id值获取
                var male=document.getElementById("textmale");

                //创建两个文本节点
                var textnodename=document.createTextNode(name.value);
                var textnodemale=document.createTextNode(male.value);
                //alert(name.value);
                //alert(male.value);

                //创建三个新的td节
                var tdnode1=document.createElement("td");
                var tdnode2=document.createElement("td");
                var tdnode3=document.createElement("td");

                
                //创建一个a节点
                var a=document.createElement("a");
                //设置a节点的值
                a.href="#";
//a 节点中也要设置一个文本节点  将来在页面上显示的超链接就是这个 文本节点
                var atext=document.createTextNode("删除");
                //把该文本节点设置进a标签总
                a.appendChild(atext);

                //因为刚加入的内容也是可以进行删除的  所以 这里需要为每一个刚创建的a节点  添加一个onclick事件
                a.onclick=function(){
                    shanchudaoimpl(this);
                }

                //在td中设置文本
                tdnode1.appendChild(textnodename);
                tdnode2.appendChild(textnodemale);
                tdnode3.appendChild(a);

                //创建tr标签
                var tr=document.createElement("tr");
                //在tr中设置td
                tr.appendChild(tdnode1);
                tr.appendChild(tdnode2);
                tr.appendChild(tdnode3);
                //得到父类节点tbody
                var tbody=document.getElementById("tbody");
                tbody.appendChild(tr);
            }
        }

    </script>

转载于:https://www.cnblogs.com/Joke-Jay/p/6719832.html

awv94517

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实验一(添加节点，删除节点)

静态html页面：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tid{border...
复制链接

扫一扫