用js实现增加和删除功能

最新推荐文章于 2023-10-11 17:30:01 发布

LRight-T

最新推荐文章于 2023-10-11 17:30:01 发布

阅读量7.4k

点赞数 2

文章标签： javascript js html

本文链接：https://blog.csdn.net/qq_44604924/article/details/108014995

版权

描述：用js实现增加和删除功能，点击按钮进行增加，点击delete进行删除具体界面如下：
在这里插入图片描述
js代码如下：
用于进行删除的函数，用removeChild()函数实现：
灰色的部分是代码注释了，是因为把它提取成一个函数后面进行调用，所以前面的部分不在此函数里面实现：
2.对删除函数进行调用，对所有的超链接进行点击函数绑定：
在这里插入图片描述
3.添加：
1）点击按钮，将数据添加到表格中，要先获取数据，代码：

2）创建表单结构，用document.createElement()函数和document.createTextNode()函数，（注意：创建超链接节点时要为他加上href属性和绑定点击响应函数）实现代码如下：
在这里插入图片描述
3）将文本添加进节点中，使用appendChild()函数实现：

js的完整代码如下：

	<script type="text/javascript">
			function delA(){
//				var aAll = document.getElementsByTagName("a");
//				for(var i=0;i<aAll.length;i++){
//					aAll[i].onclick = function(){
						//点击超链接要删除
						//this指向点击的超链接
						var theTr = this.parentNode.parentNode;
					//  var thename = thrTr.Children[0].innerHTML	
						var thename = theTr.getElementsByTagName("td")[0].innerHTML; 
					var flag = confirm("确定要删除"+thename+"吗？");
				 
					
					if(flag){
						theTr.parentNode.removeChild(theTr);
					}
//				};
			}
			window.onload = function(){
				//绑定事件监听
				//var theTbody = document.getElementsByTagName("tbody");
				var aAll = document.getElementsByTagName("a");
				for(var i=0;i<aAll.length;i++){
					aAll[i].onclick = delA;
				}
				//添加功能，点击按钮以后，添加元素到表格中
				var button1 = document.getElementById("button1");
				button1.onclick = function(){
				var name = document.getElementsByTagName("input")[0].value;
				var email = document.getElementsByTagName("input")[1].value;
				var salary = document.getElementsByTagName("input")[2].value;
				//创建表单结构
				var tr = document.createElement("tr");
				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");
				a.href = "javascript:;";
				a.onclick = delA;
				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);
				a.appendChild(deltext);
				atd.appendChild(a);
				//将td添加到tr中
					tr.appendChild(nametd);
					tr.appendChild(emailtd);
					tr.appendChild(salarytd);
					tr.appendChild(atd);
					var theTbody = document.getElementById("tbody1");
					theTbody.appendChild(tr);
					//return false;
				};
				
				
			};
		</script>

html代码如下：

<body>
		<table id="table1" cellspacing="0">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>Del</th>
				</tr>
			</thead>
			<tbody id="tbody1">
				<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@jerry.com</td>
					<td>8000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>Bob@bob.com</td>
					<td>10000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
			</tbody>
			
		</table>
		<br /><br />
		<h2>添加新元素</h2>
		<table id="table2">
			
			<tr>
				<td>name:</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>email:</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>salary:</td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">&nbsp;</td>
				<td><button id="button1">submit</button></td>
			</tr>
		</table>
	</body>

LRight-T

关注

2
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
用js实现增加和删除功能

描述：用js实现增加和删除功能，点击按钮进行增加，点击delete进行删除具体界面如下：js代码如下：用于进行删除的函数，用removeChild()函数实现：灰色的部分是代码注释了，是因为把它提取成一个函数后面进行调用，所以前面的部分不在此函数里面实现：2.对删除函数进行调用，对所有的超链接进行点击函数绑定：3.添加：1）点击按钮，将数据添加到表格中，要先获取数据，代码：2）创建表单结构，用document.createElement()函数和document.createTextNo
复制链接

扫一扫