静态html页面：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         #tid{border-collapse:collapse;}/*这个样式是 为表格设置单线条 #tid  是id选择器  下面表格中直接id="tid"就能够使用这个样式 (.a 类选择器  class="a")*/
  8.     </style>
  9. </head>
  10. <body>
  11. <center>
  12.     <table name="tname"  id="tid" border="1" cellpadding="10" cellspacing="2" >
  13.         <tbody id="tbody">
  14.             <tr bgcolor="#7fff00">
  15.                 <th>名字</th>
  16.                 <th>性别</th>
  17.                 <th>&nbsp</th>
  18.             </tr>
  19.  
  20.             <tr>
  21.                 <td>
  22.                     tom
  23.                 </td>
  24.                 <td>男</td>
  25.                 <td><a href="#">删除</a></td>
  26.             </tr>
  27.  
  28.             <tr>
  29.                 <td>jay</td>
  30.                 <td>男</td>
  31.                 <td><a href="#">删除</a></td>
  32.             </tr>
  33.  
  34.             <tr>
  35.                 <td>小明</td>
  36.                 <td>男</td>
  37.                 <td><a href="#">删除</a></td>
  38.             </tr>
  39.         </tbody>
  40.     </table>
  41. <h2>--------------------添加操作---------------------</h2>
  42.     name:<input name="name" id="textname" size="10">
  43.     male:<input name="male" id="textmale">
  44.     <input name="submit" type="submit" value="添加">
  45. </center>
  46. </body>
  47. </html>

静态页面效果：

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

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

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

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

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

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

JavaScript代码：

  1.     <script type="text/javascript">
  2.         window.onload=function(){
  3.  
  4.             //获取所有的a节点
  5.             var anodes=document.getElementById("tid").getElementsByTagName("a");
  6.             for(var i=0;i<anodes.length;i++){//为每个a节点定义onclick处理事件
  7.                 anodes[i].onclick=function(){
  8.                     shanchudaoimpl(this);//执行删除的函数 参数传的是this 表示当前操作的超链接
  9.                 }
  10.             }
  11.  
  12.             //调用添加函数
  13.             add();
  14.         }
  15.  
  16.         //定义去字符函数
  17.         function trim(text){
  18.             var reg=/^\s*|\s*$/g;
  19.             return text.replace(reg,"");
  20.         }
  21.  
  22.         //删除函数实现
  23.         function shanchudaoimpl(sc){
  24.             //获取单击列 的父类的父类 tr
  25.             var trnode=sc.parentNode.parentNode;
  26.             //获取单击列的 前面的文本
  27.             var textcontext=trnode.getElementsByTagName("td")[0].firstChild.nodeValue;
  28.             textcontext=trim(textcontext);//去除前后的空格
  29.  
  30.             //现在已经得到了文本值
  31.             var flag=confirm("删除" +textcontext +"的信息");
  32.             if(flag){
  33.                 //执行删除  通过trnode得到父节点 然后删除
  34.                 trnode.parentNode.removeChild(trnode);
  35.             }
  36.         }
  37.  
  38.         //定义添加的函数
  39.         function add(){
  40.             //首先取得提交按钮节点  绑定onclick时间
  41.             var submit=document.getElementsByName("submit")[0];
  42.             submit.onclick=function(){
  43.                 //alert("提交")
  44.                 //首先获取对应的文本值
  45. //                var name=document.getElementsByName("name")[0];//第二种 通过属性值 获取 这种方式  不经常使用  返回了是一个集合数组
  46. //                var male=document.getElementsByName("male")[0];
  47. //                alert(name.value);
  48. //                alert(male.value);
  49. //                var name=document.getElementsByTagName("input")[0];//第三种 通过标签名进行获取  放回的同样是一个数组
  50. //                var male=document.getElementsByTagName("input")[0];
  51. //                alert(name.value);
  52. //                alert(name.value);
  53.  
  54.                 var name=document.getElementById("textname");//第一种方式  通过id值获取
  55.                 var male=document.getElementById("textmale");
  56.  
  57.                 //创建两个文本节点
  58.                 var textnodename=document.createTextNode(name.value);
  59.                 var textnodemale=document.createTextNode(male.value);
  60.                 //alert(name.value);
  61.                 //alert(male.value);
  62.  
  63.                 //创建三个新的td节
  64.                 var tdnode1=document.createElement("td");
  65.                 var tdnode2=document.createElement("td");
  66.                 var tdnode3=document.createElement("td");
  67.  
  68.                 //创建一个a节点
  69.                 var a=document.createElement("a");
  70.                 //设置a节点的值
  71.                 a.href="#";
  72. //a 节点中也要设置一个文本节点  将来在页面上显示的超链接就是这个 文本节点
  73.                 var atext=document.createTextNode("删除");
  74.                 //把该文本节点设置进a标签总
  75.                 a.appendChild(atext);
  77.                 //因为刚加入的内容也是可以进行删除的  所以 这里需要为每一个刚创建的a节点  添加一个onclick事件
  78.                 a.onclick=function(){
  79.                     shanchudaoimpl(this);
  80.                 }
  81.  
  82.                 //在td中设置文本
  83.                 tdnode1.appendChild(textnodename);
  84.                 tdnode2.appendChild(textnodemale);
  85.                 tdnode3.appendChild(a);
  86.  
  87.                 //创建tr标签
  88.                 var tr=document.createElement("tr");
  89.                 //在tr中设置td
  90.                 tr.appendChild(tdnode1);
  91.                 tr.appendChild(tdnode2);
  92.                 tr.appendChild(tdnode3);
  93.                 //得到父类节点tbody
  94.                 var tbody=document.getElementById("tbody");
  95.                 tbody.appendChild(tr);
  96.             }
  97.         }
  98.  
  99.     </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. Linux 管道是什么 ？原理

    简单点就是说,一个命令的结果作为另外一个命令(结果)的输入 . 管道是linux提供的一种常见的进程通信工具,也是很多shell命令能够灵活组合产生强大用途的一个重要工具. 管道是什么? 管道,顾名思 ...

  2. 编程算法 - 把字符串转换为整数 代码(C)

    把字符串转换为整数 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 写一个函数StrToInt, 模拟atoi的功能, 把字符串转换为整数. 须 ...

  3. libcanbus官方主页

    libcanbus canbus(CAN BUS V2.0 B)扩展格式库项目简析 注: 本文如果你已经有linux开发环境 请确保你使用本库时是tag版本号. 该库遵循的协议是SAE J1939-2 ...

  4. perl的安装

    http://www.activestate.com/activeperl/downloads 安装的时候,默认把perl放置到环境变量的PATH中 之后,需要重启电脑,确保环境变量生效 执行perl ...

  5. ServletContextAware、ServletRequestAware、ServletResponseAware、SessionAware

    转自:ServletContextAware.ServletRequestAware.ServletResponseAware.SessionAware Struts 2提供了Aware接口.Awar ...

  6. 用dom4j解析xml文件并执行增删改查操作

    转自:https://www.aliyun.com/jiaocheng/1339446.html xml文件: <?xml version="1.0" encoding=&q ...

  7. C++字符串与指针 所有的内容也就这么多了。

    1.定义一个字符串数组并初始化,然后输出其中的字符串. #include <iostream> using namespace std;int main(){ char str[]=&qu ...

  8. 排序系列 之 冒泡排序及其改进算法 —— Java实现

    冒泡排序算法 冒泡排序算法 改进一 冒泡排序算法 改进二 冒泡排序算法 改进三 冒泡排序算法 基本思想: 在要排序的一组数中,对当前还未排好序的范围内的全部数据,自上而下对相邻的两个数依次进行比较和调 ...

  9. 基于ACE的TAO开发---一个简单的入门实例-----VS2008（二）

    上一节已经说了如何编译idl文件.现在就用编好的文件来写一个最小的corba小程序的.程序分为服务器程序和客户端程序. 说明下,代码是<基于C++CORBA高级编程>一书中的例子. 1.首 ...

  10. java学习笔记5——String类常用方法

    1.字符串长度计算: int i = String1.length(); 2.字符串比较:1) equals()和equalsIgnoreCase //比较两个字符串对象的实体是否相同,相同输出tru ...