静态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>

JavaScript实验一(添加节点，删除节点)的更多相关文章

  1. 添加和删除节点（HTML 元素）。

    JavaScript HTML DOM 元素(节点)   添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  2. adoop集群动态添加和删除节点

    hadoop集群动态添加和删除节点说明 上篇博客我已经安装了Hadoop集群(hadoop集群的安装步骤和配置),现在写这个博客我将在之前的基础上进行节点的添加的删除. 首先将启动四台机器(一主三从) ...

  3. jquery 添加和删除节点

    // 增加一个三和一节点 function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(&qu ...

  4. Elasticsearch集群管理之添加、删除节点

    1.问题抛出 1.1 新增节点问题 我的群集具有黄色运行状况,因为它只有一个节点,因此副本保持未分配状态,我想要添加一个节点,该怎么弄? 1.2 删除节点问题 假设集群中有5个节点,我必须在运行时删除 ...

  5. jQuery里面的DOM操作（查找，创建，添加，删除节点）

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...

  6. CRS添加、删除节点

    一.如何删除一个节点: 1.1 在存活的节点上操作,使用dbca删除DB实例 1.2 清除ASM实例  在存活的节点上做如下操作  1.2.1 停止ASM实例    export ORACLE_HOM ...

  7. 添加和删除节点（HTML元素）

    创建新的HTML元素 <div id="div1"> <p id="p1">这是一个段落</p> <p id=&quo ...

  8. dojo Tree 添加、删除节点

    var tree=this.tree; var store=tree.model.store; if(this.node){ console.log(this.node) var children=t ...

  9. hadoop 添加，删除节点

    http://www.cnblogs.com/tommyli/p/3418273.html

随机推荐

  1. iOS 在 ARC 环境下 dealloc 的使用、理解误区

    iOS 在 ARC 环境下 dealloc 的使用.理解误区 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&qu ...

  2. Linux环境中Apache也就是httpd服务的启动，查看版本等操作

    本机是虚拟机,装的redhat Linux版本,默认是安装了httpd的 打开terminal 切换到root用户 cd到/etc/rc.d/init.d/目录,并列出该目录下的所有文件,看看是否有h ...

  3. Linux 强行终止

    kill -9 pid pid是进程号 -9 代表的是数字 INT 2 这个就是你在bash下面用Ctrl+C 来结束一个程序时,bash会向进程发送这个信号,默认的,进程收到这个程序会结束. 你可以 ...

  4. c27---typedef

    // // main.c // typedef #include <stdio.h> /* typedef可以给一个已知的数据类型起别名. typedef 原有的数据类型 别名; 注意: ...

  5. [POJ 3621] Sightseeing Cows

    [题目链接] http://poj.org/problem?id=3621 [算法] 01分数规划(最优比率环) [代码] #include <algorithm> #include &l ...

  6. Java：笔记-1

    ylbtech-Java:笔记-1 1.返回顶部 1. /** * 简介请求 * @return */ @RequestMapping("/JJ") public String j ...

  7. [源码管理] ubuntu中svn简明用法：服务器搭建＋客户端使用

    本文是对网络上前人的优秀文章加以实践验证后所整理(修正或补充) 第一部分:svn服务器搭建(主要是四步走) 参考:http://www.son1c.cn/show/920.html 一,安装Subve ...

  8. hihoCoder-1633 ACM-ICPC北京赛区2017 G.Liaoning Ship’s Voyage 线段与三角形规范相交

    题面 题意:给你一个20*20的地图,起点(0,0),终点(n-1,n-1),有障碍的点为‘#’,每次可以向8个方向走一步,还给了一个三角形,除了障碍以外,到这8个方向上的点的线段如果没有与三角形相交 ...

  9. Hdu-6243 2017CCPC-Final A.Dogs and Cages 数学

    题面 题意:问1~n的所有的排列组合中那些,所有数字 i 不在第 i 位的个数之和除以n的全排,即题目所说的期望,比如n=3 排列有123(0),132(2),231(3),213(2),312(3) ...

  10. 最详细的CentOS 6与7对比（三）：性能测试对比

    本主题将从3个角度进行对比 常见设置(CentOS 6 vs CentOS 7) 服务管理(Sysvinit vs Upstart vs Systemd) 性能测试(cpu/mem/io/oltp) ...