html之table删除和添加数据（获取行号和列号）

最新推荐文章于 2023-04-01 09:40:48 发布

月疯

最新推荐文章于 2023-04-01 09:40:48 发布

阅读量1.2k

点赞数 1

分类专栏：【Django】【web前端基础知识】

本文链接：https://blog.csdn.net/chehec2010/article/details/115532504

版权

【web前端基础知识】同时被 2 个专栏收录

54 篇文章 6 订阅

订阅专栏

【Django】

21 篇文章 3 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#t{
			width: 800px;
			height: 80px;
			
		}
	</style>
	<body>
		<div id="df" style="width: 800px; height: 50px;">
			<button id="btn" onclick="add()">添加数据</button>
			<span>请开始添加数据：惠涛</span>
		</div>
		<table border="1px" cellspacing="1px" cellpadding="px" id="t">
			<thead>
				<tr>
					<th>id号</th>
					<th>姓名</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>
		
		<script type="text/javascript">
			var count=0;
			// 添加数据
			function add(){
				count++;
				var tr=document.createElement("tr");
				var td1=document.createElement("td");
				var td2=document.createElement("td");
				var del=document.createElement("td");
				td1.innerHTML=count+"号";
				td2.innerHTML="惠涛"+count;
				del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
				var tab=document.getElementById("tbody");
				tab.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(del);
				
			}
			// 删除数据
			function del(obj){
				var tr=obj.parentNode.parentNode;
				// 获取他的行号
				row_(tr)
				tr.parentNode.removeChild(tr);
			}
			
			//删除行的行号和列号
			function row_(obj){
				var rows = document.getElementById('tbody').getElementsByTagName('tr');
				
				for(var j=0;j<rows.length;j++){
					if(obj==rows[j]){
						alert(rows[j].rowIndex+1)
					} 
				}
				
				// 获取列号，先考虑没有数据，只有一列
				if(j=0){
					var cell = rows[i].getElementsByTagName('tr');
					for (var k = 0; k< cell.length; k++){
						cell[k].onclick=function(){
							alert(huitao)
							alert(cell[k].cellIndex+1)
						}
					}
				}else{
					cells = rows[i].getElementsByTagName('td');
					for(var i=0;i<cells.length;i++){
						if(cells[i]==obj){
							alert(this.cellIndex+1)
						}
					}
				}
			}
			
		</script>
	</body>
</html>

效果展示：