JS学习笔记-列表的删除和增加

雨点打透心脏的1/2处 2023-06-20 09:29 12阅读 0赞

## 列表的删除和增加 ##

**1.HTML文件**

我们在HTML中写入一个简单的学生信息表，这个表并没有用太多的样式，但是不影响结果。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div align="center">
    			<input type="text" id="id" placeholder="请输入编号">
    			<input type="text" id="name" placeholder="请输入姓名">
    			<input type="text" id="gender" placeholder="请输入性别">
    			<input type="button" value="添加" id="btn_add">		
    		</div>
    		<table border="" cellspacing="" cellpadding="" style="" align="center">
    			<caption>学生信息表</caption>
    			<tr>
    				<td>学号</td>
    				<td>姓名</td>
    				<td>性别</td>
    				<td>操作</td>
    			</tr>
    			
    			<tr>
    				<td>1</td>
    				<td>刘有义</td>
    				<td>男</td>
    				<td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
    			</tr>
    			
    			<tr>
    				<td>2</td>
    				<td>铁无情</td>
    				<td>女</td>
    				<td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
    			</tr>
    			
    			<tr>
    				<td>3</td>
    				<td>李中</td>
    				<td>男</td>
    				<td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
    			</tr>
    		</table>
    	</body>
    	<script src="js/add_delete.js"></script>
    </html>

**2.js文件**

1）我们用面向对象的的js来写

//1.获取按钮
    		document.getElementById("btn_add").onclick = function(){ 
    			//获取文本框内容
    			var id = document.getElementById("id").value;
    			var name = document.getElementById("name").value;
    			var gender = document.getElementById("gender").value;
    			//创建td,赋值td的标签体
    			//id的td
    			var td_id = document.createElement("td");
    			var text_id = document.createTextNode(id);
    			td_id.appendChild(text_id);
    			//name的td
    			var td_name = document.createElement("td");
    			var text_name = document.createTextNode(name);
    			td_name.appendChild(text_name );
    			//gender的td
    			var td_gender = document.createElement("td");
    			var text_gender = document.createTextNode(gender);
    			td_gender.appendChild(text_gender);
    			//a标签的td
    			var td_a = document.createElement("td");
    			var ele_a = document.createElement("a");
    			ele_a.setAttribute("href","javascript:void(0);");
    			ele_a.setAttribute("onclick","delTr(this)");
    			var text_a = document.createTextNode("删除");
    			ele_a.appendChild(text_a);
    			td_a.appendChild(ele_a);
    			//创建tr
    			var tr = document.createElement("tr");
    			//5.添加td到tr中
    			tr.appendChild(td_id);
    			tr.appendChild(td_name);
    			tr.appendChild(td_gender);
    			tr.appendChild(td_a);
    			//6.获取table
    			var table = document.getElementsByTagName("table")[0];
    			table.appendChild(tr);
    		}
    		function delTr(obj){ 
    			var table = obj.parentNode.parentNode.parentNode;
    			var tr = obj.parentNode.parentNode;
    			table.removeChild(tr);
    		}

2）

我们用一个更简单的方法来写出相同的效果，获取table的innerHTML然后直接修改。

document.getElementById("btn_add").onclick = function(){ 
    			//获取文本框内容
    			var id = document.getElementById("id").value;
    			var name = document.getElementById("name").value;
    			var gender = document.getElementById("gender").value;
    			
    			//获取table
    			var table = document.getElementsByTagName("table")[0];
    			
    			//追加一行
    			table.innerHTML += "<tr>\n"	+
    				"<td>"+id+"</td>\n"  +
    				"<td>"+name+"</td>\n"   +
    				"<td>"+gender+"</td>\n"  +
    				"<td><a href=\"javascript:void(0);\" οnclick=\"delTr(this)\">删除</a><td>\n" +
    			"</tr>";
    		}
    		function delTr(obj){ 
    			var table = obj.parentNode.parentNode.parentNode;
    			var tr = obj.parentNode.parentNode;
    			table.removeChild(tr);
    		}

**3.结果**  
两种js代码的的运行结果相同，如下：  
![例子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191209235001217.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70