2021-08-25

最新推荐文章于 2024-04-30 14:16:17 发布

starlight dark

最新推荐文章于 2024-04-30 14:16:17 发布

阅读量185

点赞数 3

文章标签： html5 html

本文链接：https://blog.csdn.net/qq_46423021/article/details/119918414

版权

删除指定的表格行信息
1. 思路：

首先进行对于要删除的行进行鼠标点击：

鼠标点击的目的时为此行赋予一个classname值，但是为了排除其余的行有之前点击赋予的classname值，并没有删除，所以我们需要先进行遍历表格，看行tr 的属性值中有没有classname值是为你定义的；如果有我们将此classname值移除，没有的话，为点击的行添加你所定义的classname；

之后在进行删除事件：遍历数组，找到你所定义的classname那一行，进行删除；

1. 具体代码：
  1. 鼠标点击事件：

为鼠标点击的行进行添加classname：一般鼠标点击事件发生在删除事件之前，所有我将赋予classname的函数先写出来了：放在onload里面先进行加载：

//先为点击添加class进行加载
			onload =function(){
				//先获取表格
				var table = document.getElementById("table1");
				//遍历表格，为每行添加点击事件
				for(var i = 0;i<table.rows.length;i++){
					//添加点击事件的具体方法：查询不在此行的其余行是否有值为shanchu的classnaem；
					//有进行删除；没有为此行进行赋值；
					table.tBodies[0].rows[i].onclick = function(){
						//查询不在此行的其余行是否有值为shanchu的classnaem；
					    //有进行删除；没有为此行进行赋值；
						for(var i1 = 0;i1<table.rows.length;i1++){
							var tdclass = document.getElementsByTagName("tr")[i1];
							if(tdclass.getAttribute("class")!=null){
								//删除其余行已添加的class
								tdclass.removeAttribute("class");
							}
						}
						//为点击的行进行添加class属性
						this.setAttribute("class","shanchu");
					}
					
				}
			}

1. 1. 按钮删除事件：

这里进行删除前会进行查询是否有值为shanchu的class，有进行删除，在删除前会提醒用户是否真的要删除；

没有则提醒用户选择数据

//点击删除按钮事件
			function deletetr(){
				//获取表格
				var table = document.getElementById("table1");
				//定义一个全局变量 为后面判断有没有对行进行点击事件
				var ad = true;
				//for循环表格进行查找是否有值为shanchu的claa属性；
				for(var i = 0;i<table.rows.length;i++){
					//寻找每一个tr 看此tr是否有值为shanchu的claa属性
					//有删除，没有不删除，并提示用户选择数据
					var tdclass = document.getElementsByTagName("tr")[i];
						if(tdclass.getAttribute("class")=="shanchu"){
							//弹出一个提示框，提示用户是否要删除数据
							//确定为删除，取消为不删除
							if(confirm("你确定要删除吗？")){
								//这里使用removeChild函数删除行
								//这里要注意在浏览器内，浏览器为表格自动建立tbody，
								//故要添加第一个tbody，即tBodies[0];
								//利用父类删除子类,注意：此时的tr父类不是table而是tbody；
								table.tBodies[0].removeChild(tdclass);
							}
							//这个时取消删除，退出循环，要记得改变ad的值，否则会提示请选择数据
							else{
								ad =true;
								break;
							}
							//一旦删除退出循环
							ad=true;
							break;
						}
						//因为没有进行点击，进行提示：请选择数据；
						else{
							ad =false;
						}
				}
				//没有tr是有值为shanchu的claa属性，提示用户选择数据
				if(!ad){
					alert("请选择数据");
				}
			}

上述代码均放在script里面

1. 1. 建立表格以及建立按钮：

将删除按钮放在div里面，方便布局；

<body >
			<table id = "table1">
				<tr >
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>地址</td>
					<td>密码</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>12</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>13</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>15</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>17</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>12</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>01</td>
					<td>1</td>
				</tr>
				
			</table>
			<div id="div1">
				 
			</div>
			<div id="">
				<button onclick="deletetr()">删除一行</button>
				
			</div>
		</body>

starlight dark

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-08-25

删除指定的表格行信息思路：首先进行对于要删除的行进行鼠标点击：鼠标点击的目的时为此行赋予一个classname值，但是为了排除其余的行有之前点击赋予的classname值，并没有删除，所以我们需要先进行遍历表格，看行tr 的属性值中有没有classname值是为你定义的；如果有我们将此classname值移除，没有的话，为点击的行添加你所定义的classname；之后在进行删除事件：遍历数组，找到你所定义的classname那一行，进行删除；具体代码：..
复制链接

扫一扫