静态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. Python面向切面编程-语法层面和functools模块

    1,Python语法层面对面向切面编程的支持(方法名装饰后改变为log) __author__ = 'Administrator' import time def log(func): def wra ...

  2. 仿支付宝/微信的password输入框效果GridPasswordView解析

    仿支付宝/微信的password输入框效果GridPasswordView解析,把一些设置和一些关键的地方列了出来,方便大家使用,可能能够省一部分的时间,也算是自己的积累吧. 1.password框能 ...

  3. PHP设计模式之 单例模式 工厂模式 实例讲解

    单例模式又称为职责模式,它用来在程序中创建一个单一功能的访问点,通俗地说就是实例化出来的对象是唯一的.所有的单例模式至少拥有以下三种公共元素:1. 它们必须拥有一个构造函数,并且必须被标记为priva ...

  4. 消息推送之百度云推送Android集成与用法

    这两天因为项目须要.研究了一下百度云推送,本来这事没什么多大工作量的,但注冊百度开发人员账户创建应用令我蛋疼菊紧了好一阵,这些东西做了对技术没啥提升,不做又不行,必经之路. 好在我耗费了N多个毫毫秒秒 ...

  5. JavaScript和Java的区别

    一个是编译型语言(客户端平台必须有仿真器或解释器),一个是解析型语言(不经过编译,直接将文本格式的字符代码发送给浏览器解释执行). 虽然JavaScript与Java有紧密的联系,但却是两个公司开发的 ...

  6. vs2015+ffmpeg开发环境配置【转】

    本文转载自:http://blog.csdn.net/hustlx/article/details/51014307 1.在http://ffmpeg.zeranoe.com/builds/ 下载最新 ...

  7. STEM教育是什么?

    STEM教育是什么? STEM 是Science科学.Technology技术.Engineering工程.Math数学,这4个词的开头字母的组合.所以STEM教育就是结合科学.技术.工程.数学的跨领 ...

  8. poj1700--贪心--Crossing River

    Crossing River Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12260   Accepted: 4641 D ...

  9. Python生成器实现杨辉三角打印

    def triangles(): c = [1] while 1: yield c a,b=[0]+c,c+[0] c=[a[i]+b[i] for i in range(len(a))] n = 0 ...

  10. Spring《八-一》CGLIB代理和自动代理

    CGLIB代理 配置文档 <bean id="logProxy" class="org.springframework.aop.framework.ProxyFac ...