javaScript学习日记(3) ------取代，交换，删除，添加节点操作

最新推荐文章于 2023-03-07 16:49:36 发布

即客。

最新推荐文章于 2023-03-07 16:49:36 发布

阅读量232

点赞数

本文链接：https://blog.csdn.net/qq_39887036/article/details/104065588

版权

Body中代码

<body>
  <p>你喜欢哪个城市</p>
  <ul id = "city">
    <li id="bj" name="beijing">北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>贵州</li>
  </ul>
  
  <br><br>
  
  <p>你喜欢什么游戏</p>
  <ul id="game">
    <li id="lol" name="yingxionglianmeng">LOL</li>
    <li>穿越火线</li>
    <li>QQ飞车</li>
    <li>王者荣耀</li>
  </ul>
  
  gender:
   <input type="radio" name="gender"  value="male" />Male
   <input type="radio" name="gender"  value="female" />Female
   
   <br>
   name：<input type="text" id="name" value="JXK" /> 
  
 </body>

在这里插入图片描述

1.replaceChild 方法

   //得到北京节点
   var oldNode = document.getElementById("bj");
   
   //得到lol节点
   var newNode = document.getElementById("lol");
   
   //得到城市节点
   var cityNode = document.getElementById("city");
   
   //用newNode 取代 OldNode 
   //新的在前，替换的在后
   cityNode.replaceChild(newNode,oldNode);

2.实现互换

//得到交换的两个节点
 var node1 = document.getElementById("bj");
    var node2 = document.getElementById("lol");
    
//调用replaceEach
  replaceEach(node1,node2);

function replaceEach(aNode,bNode){
   	//得到两个节点的父节点
   	var aParent = aNode.parentNode;
   	var bParent = bNode.parentNode;
   	if(aParent && bParent){
   		 //克隆 aNode
    		var aNodeClone = aNode.cloneNode(true);
    
   		 //交换
   		 bParent.replaceChild(aNodeClone,bNode);
   		 aParent.replaceChild(bNode,aNode);
    }
  }

在这里插入图片描述
3 交换对应节点
（0-4，1-5，2-6，3-7)点击交换

  <script type="text/javascript">
    window.onload = function(){
  //交换两个节点
  function replaceEach(aNode,bNode){
   //得到两个节点的父节点
   var aParent = aNode.parentNode;
   var bParent = bNode.parentNode;
   
   if(aParent && bParent){
    //复制一个aNode
    var aNodeClone = aNode.cloneNode(true);
    
    //将 replaceEach 方法也复制
    aNodeClone.onclick = aNode.onclick;
    
    //将下标也复制
    aNodeClone.index = aNode.index;
    
    //交换两个节点
    bParent.replaceChild(aNodeClone,bNode);
    aParent.replaceChild(bNode,aNode);
    
    //交换下标
    var tempIndex = aNode.index;
    aNode.index = bNode.inndex;
    bNode.index = tempIndex;
   }
  }
  //得到所有 li
   var liNodes = document.getElementsByTagName("li");
   
  //为每个Li设置单击相应事件
  for(var i = 0; i < liNodes.length; i++){
  	 //为每个li 加一个index属性
   	liNodes[i].index = i;
   	liNodes[i].onclick = function(){
   	 //alert(this.index);
   	 
   	 //得到交换的目标节点下标
    	var tarIndex = 0;
    	if(this.index < 4){
    		 tarIndex = this.index + 4;
    	}else{
     		tarIndex = this.index - 4;
    }
    
    //交换两个下标对应节点
    replaceEach(this,liNodes[tarIndex]);
   }
  }
    } 
  </script>

4，删除节点

<script type="text/javascript">
    window.onload = function(){
 	 //得到所有li 节点
 	 var liNodes = document.getElementsByTagName("li");
   
  	//为每个 li 设置一个onclick 属性
  	for(var i = 0; i < liNodes.length; i++){
  		 liNodes[i].onclick = function(){
    		var flag = confirm("确定要删除"
     				+ this.firstChild.nodeValue+"的信息吗");
   		 if(flag) {
     		this.parentNode.removeChild(this);
   		 }
    
 	  }
 	 }
    } 
  </script>

实现简单的员工管理

效果：
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>管理系统简单版</title>
  
  <script type="text/javascript">
     window.onload = function(){
    	//得到所有的 tbody 节点
    	var tbodyNode = document.getElementById("tableName");
    	var aNodes = tbodyNode.getElementsByTagName("a");
    
    	for(var i = 0; i < aNodes.length; i++){
     		//为每个a 加上 onclick 函数
     		aNodes[i].onclick = function(){
      		aClick(this);
      		return false;
     		};
    	}
    
    function aClick(aNode){
     
     	//得到当前delete 所在tr父节点
     	var trNode = aNode.parentNode.parentNode;
     
     	//得到第一个 td 的text
     	var textNodeValue = trNode.getElementsByTagName("td")[0]
             .firstChild.nodeValue;
     	//去除首位空格
     	textNodeValue = trim(textNodeValue);
     
     	//是否确定删除某条记录
     	var flag = confirm("确定要删除" + textNodeValue + "的信息吗?");
     	if(flag){
      		trNode.parentNode.removeChild(trNode);
     	}
     	return false;
    	}
    
    	//一个去除首位空格的函数
    	function trim(textStr){
     		//去除首尾空格的 lambda 表达式
     		var reg = /^\s* | \s*$/g;
     		return textStr.replace(reg,"");
    	}
    
    	// //处理添加事件
    	//得到 summit 按钮
    	var submitButton = document.getElementById("commit");
    	//alert(1);
    	submitButton.onclick = function(){
     	//得到三个输入标签
     	var nameValue = document.getElementById("name").value;
     	var emailValue = document.getElementById("email").value;
     	var salaryValue = document.getElementById("salary").value;
     
     	//新建 td 标签
     	//姓名标签
    	 var nameTd = document.createElement("td");
     	nameTd.appendChild(document.createTextNode(nameValue));
     
     	//email 标签
     	var emailTd = document.createElement("td");
     	emailTd.appendChild(document.createTextNode(emailValue));
     
     	//工资标签
     	var salaryTd = document.createElement("td");
     	salaryTd.appendChild(document.createTextNode(salaryValue));
     
     	//创建超链接节点
     	var aNode = document.createElement("a");
     	aNode.href = "deleteEmp?id = xxx"
     
     	aNode.appendChild(document.createTextNode("Delete"));
     	var delTd = document.createElement("td");
     	delTd.appendChild(aNode);
     
     	//新建一个 tr 属性
     	//将所有 td 属性添加到 tr 中
     	var newTr = document.createElement("tr");
     	newTr.appendChild(nameTd);
     	newTr.appendChild(emailTd);
     	newTr.appendChild(salaryTd);
     	newTr.appendChild(delTd);
     
    	//给超链接节点设置单击响应函数
     	aNode.onclick = function(){
     		 aClick(this);
      		return false;
     	};
     
     	//将新建的tr 放在tbody 中
     	tbodyNode.appendChild(newTr);
     }
    
   }
  </script>
  
 </head>
 <body>
  <center>
   <p>添加新员工</p>
   
   name:<input type="text" name="name" id="name" value="ff"/> &nbsp;
   email:<input type="text" name="email" id="email"/>&nbsp;
   salary:<input type="text" name="salary" id="salary"/>
   <br/><br />
   <input type="button" name="commit" id="commit" value="commit" />
   <hr >
   
   <table border="1px" cellspacing="0px" width="400px" height="40px">
    <tbody id="tableName">
     	<tr>
      		<th>Name</th>
      		<th>Email</th>
      		<th>Salary</th>
      		<th>&nbsp;&nbsp;</th>
     	</tr>
     	<tr>
      		<td>Tom</td>
      		<td>tom@tom.com</td>
      		<td>5000</td>
      		<td><a href="deleteEmp?id=001">Delete</a></td>
     	</tr>
     	<tr>
      		<td>Jerry</td>
      		<td>jerry@shou.com</td>
      		<td>8000</td>
      		<td><a href="deleteEmp?id=002">Delete</a></td>
     	</tr>
     	<tr>
      		<td>Bob</td>
      		<td>bob@tom.com</td>
      		<td>10000</td>
      		<td><a href="deleteEmp?id=003">Delete</a></td>
     	</tr> 
    </tbody>
    
   </table>
   
  </center>
 </body>
</html>

即客。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript学习日记(3) ------取代，交换，删除，添加节点操作

Body中代码<body> <p>你喜欢哪个城市</p> <ul id = "city"> <li id="bj" name="beijing">北京</li> <li>上海</li> <li>广州</li> <li>贵州&l...
复制链接

扫一扫