js表格行删除添加

最新推荐文章于 2024-09-22 11:17:00 发布

Tian_Fei

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量446

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/lois_123/article/details/53375829

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>haha</title>
	<style type="text/css">
		input{
			width: 50px;
		}
		div{
			margin-bottom: 30px;
		}
		td{
			text-align: center;
		}
		tr{
			background-color: #fff;
		}
		tr:hover{
			background-color: #f2f2f2;
		}
	</style>
</head>
<body>

	<table border="1" cellspacing="0" id="Table">
		<tr id="no1">
			<td>姓名</td>
			<td>学号</td>
			<td>手机号码</td>
			<td>功能</td>
		</tr>
		<tr id="no2">
			<td>韩梅梅</td>
			<td>1</td>
			<td>15236077621</td>
			<td><button οnclick="del(this)">删除</button></td>
		</tr>
		<tr id="no3">
			<td>李雷</td>
			<td>2</td>
			<td>15236077622</td>
			<td><button οnclick="del(this)">删除</button></td>
		</tr>
		<tr id="no4">
			<td>李华</td>
			<td>3</td>
			<td>15236077623</td>
			<td><button οnclick="del(this)">删除</button></td>
		</tr>
		<tr >
			<td colspan="4" >
				<button style="width: 100%;" οnclick="add()">添加</button>
			</td>
		</tr>
	</table>


<script type="text/javascript">
	
	function del(obj){
		var no=obj.parentNode.parentNode.rowIndex;//获得当前行行数
		//alert(no);
		document.getElementById("Table").deleteRow(no);//直接删除该行
	}
	function add(){
		var tab=document.getElementById("Table");
		// var tr=document.creatElement("tr");
		// var td=document.creatElement("td");
		// td.innerHTML="234";
		// tr.appendChild(td);
		// tab.appendChild(tr);
		
		var row=tab.rows.length-1;//获得表格总行数
		//alert(row);
		var tem=tab.insertRow(row);//添加行
		tem.insertCell(0).innerHTML="小张";//向添加行的单元格添加内容
		tem.insertCell(1).innerHTML = row;
		tem.insertCell(2).innerHTML="1523607762"+ row;
		tem.insertCell(3).innerHTML = "<button οnclick='del(this)'>删除</button>";
	}
</script>
</body>
</html>