javascript基础（dom增删改）（二十九）

最新推荐文章于 2022-01-24 21:42:19 发布

咸鸭蛋炒饭

最新推荐文章于 2022-01-24 21:42:19 发布

阅读量374

点赞数

分类专栏： HTML5基础篇文章标签： dom html javascript

本文链接：https://blog.csdn.net/u010853130/article/details/55044171

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
				//创建一个"广州"节点,添加到#city下
				//为id为btn01的按钮绑定一个单击响应函数
				myClick("btn01",function(){
					
					//创建一个广州节点
					//<li>广州</li>
					//创建一个新的li
					/*
					 * createElement()
					 * 	- 可以根据标签名来创建一个指定的元素节点对象
					 */
					var gzLi = document.createElement("li");
					
					//创建广州这个文本节点
					/*
					 * createTextNode()
					 * 	- 可以根据文本内容创建一个文本节点对象
					 */
					var gzText = document.createTextNode("广州");
					
					/*
					 * 将gzText作为子节点添加到gzLi下
					 */
					/*
					 * appendChild()
					 * 	- 可以向父节点中添加新的子节点
					 *  - 语法：父节点.appendChild(子节点)
					 */
					gzLi.appendChild(gzText);
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//将广州节点添加到id为city的节点下
					city.appendChild(gzLi);
					
				});
				
				
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					
					//创建一个广州
					var gzLi = document.createElement("li");
					var gzText = document.createTextNode("广州");
					gzLi.appendChild(gzText);
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					//将"广州"节点插入到#bj前面
					/*
					 * insertBefore()
					 * 	- 可以在指定的子节点前插入新的子节点
					 * 	- 这个方法需要由父节点调用
					 *  - 语法：父节点.insertBefore(新的节点,旧的节点)
					 */
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					city.insertBefore(gzLi , bj);
					
				});
				
				
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var gzLi = document.createElement("li");
					var gzText = document.createTextNode("广州");
					gzLi.appendChild(gzText);
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法：
					 * 		父节点.replaceChild(新的节点,旧的节点);
					 *  
					 */
					//获取id为city的元素
					var city = document.getElementById("city");
					
					city.replaceChild(gzLi , bj);
					
				});
				
				//删除#bj节点
				myClick("btn04",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					/*
					 * removeChild()
					 * 	- 用于删除一个子节点
					 *  - 语法：父节点.removeChild(子节点);
					 */
					
					//获取id为city的元素
					//var city = document.getElementById("city");
					//city.removeChild(bj);
					
					/*
					 * 子节点.parentNode.removeChild(子节点)
					 */
					bj.parentNode.removeChild(bj);
					
				});
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					
					var city = document.getElementById("city");
					alert(city.innerHTML);
					
				});
				
				//设置#bj内的HTML代码
				myClick("btn06",function(){
					
					var bj = document.getElementById("bj");
					bj.innerHTML = "平西府";
					
					/*
					 * 实际上使用innerHTML也可以完成页面中元素的增删改查，而且比我们这种常规方式更加简单
					 */
					
				});
				
				myClick("btn07",function(){
					
					//获取city节点
					var city = document.getElementById("city");
					
					//alert(city.innerHTML);
					
					//向city中，添加一个<li>广州</li>
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li元素节点
					var gzLi = document.createElement("li");
					
					//向li中添加文本
					gzLi.innerHTML = "广州";
					
					
					//将li添加到city中
					city.appendChild(gzLi);
					
				});
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

2.css样式：

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

2.练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">

	window.onload = function(){
		
		//定义一个用于删除tr的函数
		function delA(){
				
				//删除当前的超链接所在的行
				//点击哪个超链接，this就是谁
				//alert(this);
				//获取当前超链接所在的tr
				var tr = this.parentNode.parentNode;
				
				//获取要删除的用户的名字
				var name = tr.children[0].innerHTML;
				
				//删除之前，弹出一个提示框
				/*
				 * confirm()
				 * 	- 可以用来弹出一个带有确认和取消按钮的提示框
				 *  - 如果用户点击确认则返回true
				 * 		如果点击取消则返回false
				 */
				var flag = confirm("确认删除"+name+"吗？");
				
				//如果用户点击确认
				if(flag){
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				
				//点击超链接以后，它会立即跳转页面，这个是超链接的默认行为
				//如果要取消元素的默认行为，可以在元素响应函数的最后 return false
				return false;
			};
		
		/*
		 * 删除员工
		 * 	- 点击超链接以后，删除超链接所在行的员工信息
		 */
		
		//获取所有的超链接
		var links = document.getElementsByTagName("a");
		
		//为每个超链接都绑定一个单击响应函数
		for(var i=0 ; i<links.length ; i++){
			links[i].onclick = delA;
		}
		
		
		/*
		 * 点击提交按钮以后，将表单中的信息添加到表格中
		 */
		
		//为提交按钮绑定一个单击响应函数
		var addEmpButton = document.getElementById("addEmpButton");
		addEmpButton.onclick = function(){
			
			//获取用户填写的信息
			//获取用户填写的员工的姓名
			var name = document.getElementById("empName").value;
			//获取员工的email和salary
			var email = document.getElementById("email").value;
			var salary = document.getElementById("salary").value;
			
			/*
			 * 将获取到的信息，保存到一个tr中
			 * 	<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
			 */
			
			//创建一个tr
			var tr = document.createElement("tr");
			
			//创建四个td
			var nameTd = document.createElement("td");
			var emailTd = document.createElement("td");
			var salaryTd = document.createElement("td");
			var aTd = document.createElement("td");
			
			//创建一个超链接
			var a = document.createElement("a");
			
			//创建文本节点
			var nameText = document.createTextNode(name);
			var emailText = document.createTextNode(email);
			var salaryText = document.createTextNode(salary);
			var delText = document.createTextNode("Delete");
			
			//将文本添加到td中
			nameTd.appendChild(nameText);
			emailTd.appendChild(emailText);
			salaryTd.appendChild(salaryText);
			
			//向超链接中添加delete文字
			a.appendChild(delText);
			//将超链接放入到td中
			aTd.appendChild(a);
			
			//将td添加到tr中
			tr.appendChild(nameTd);
			tr.appendChild(emailTd);
			tr.appendChild(salaryTd);
			tr.appendChild(aTd);
			
			//为a添加一个href属性
			a.href="javascript:;";
			
			//由于我们这里创建的a是后加入的，还没有绑定单击响应函数，所以新加入的a并没有删除的功能
			//需要单独为超链接绑定一次单击响应函数
			a.onclick = delA;
			
			//获取table
			var employeeTable = document.getElementById("employeeTable");
			//获取tbody
			var tbody = employeeTable.getElementsByTagName("tbody")[0];
			
			//将tr添加到table中
			tbody.appendChild(tr);
			
		};
		
	};

	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th> </th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.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>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

css:

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}