table操作.JavaScript-(案例)

最新推荐文章于 2023-01-17 20:29:08 发布
今昔何年小王
最新推荐文章于 2023-01-17 20:29:08 发布
阅读量226
点赞数
分类专栏： Web
本文链接：https://blog.youkuaiyun.com/m0_37167369/article/details/80846216
版权
Web 专栏收录该内容
9 篇文章
订阅专栏
<!DOCTYPE html>
<!-- saved from url=(0032)http://192.168.10.250/table.html -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<meta http-equiv="X-UA-Compatible" content="IE-edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>table操作</title>
		<script type="text/javascript">
			function a(){
				//获取输入的数据
				var tbl=document.getElementById('table');
				var x="3";
				var m="公孙胜";
				x=document.getElementById("no").value;
				m=document.getElementById("name").value;
				//检查不要重复插入
				if(tbl.innerText.indexOf(m)>=0){
					alert("您输入的姓名"+m+"已经存在，请不要重复添加");
					return false;
				}
				//插入一行
				
				var atr=tbl.insertRow();
				var td1=atr.insertCell();
				var td2=atr.insertCell();
				var td3=atr.insertCell();
				var td4=atr.insertCell();
				td1.innerText=x;
				td2.innerText=m;
				td4.innerHTML = "<a onclick=alter(" + x+ ") href='#'>修改</a>";
				var s=document.createElement("span");
				s.innerText="删除";
				td3.appendChild(s);
				s.addEventListener('click',function(){
					delrow(s);
				});
			}


			function delrow(elm){
				elm.parentElement.parentElement.remove()
			}
			
			
			function alter(no) {


				//提示用户输入要修改的列数
				var a = window.prompt("请输入要修改的列数");
				a--;


				//如果输入的列数等于第一列，那目前提示用户，不能修改编号
				if (a == 0) {
					alert("不能修改英雄的编号");
					return;
				}
				var mytab = document.getElementById("table");
				for (var i = 1; i < mytab.rows.length; i++) { //遍历每一行
					var num = parseInt(mytab.rows[i].cells[0].innerText); //取出每一行的编号
					if (num == no) { //如果遍历的编号等于函数传进来的编号，修改该行
						if (a < mytab.rows[i].cells.length - 1) {
							var cellText = mytab.rows[i].cells[a].innerText;
							mytab.rows[i].cells[a].innerHTML = "<input onblur=blur1(this," + i + "," + a + ") type='text' value=" + cellText + " style='width:64px'  />";
						}
					}
				}


			}


			function blur1(obj, i, a) {
				document.getElementById("table").rows[i].cells[a].innerText = obj.value;
			}
		</script>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="300px" id="table">
			<tbody><tr>
				<td>序号</td>
				<td>姓名</td>
				<td>删除操作</td>
				<td>修改操作</td>
			</tr>
			<tr>
				<td>1</td>
				<td>宋江</td>
				<td><span onclick="delrow(this)">删除</span></td>
				<td><a onclick=alter(1) href='#'>修改</a>
			</tr>
			<tr>
				<td>2</td>
				<td>卢俊义</td>
				<td><span onclick="delrow(this)">删除</span></td>
				<td><a onclick=alter(2) href='#'>修改</a>
			</tr>
		</tbody></table>
		<form>
			<p>序号:<input type="text" id="no"></p>
			<p>姓名:<input type="xingming" id="name"></p>
			<p><button type="button" id="add" onclick="a()">添加</button></p>
		</form>
	
</body></html>
		
		<meta http-equiv="X-UA-Compatible" content="IE-edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>table操作</title>
		<script type="text/javascript">
			function a(){
				//获取输入的数据
				var tbl=document.getElementById('table');
				var x="3";
				var m="公孙胜";
				x=document.getElementById("no").value;
				m=document.getElementById("name").value;
				//检查不要重复插入
				if(tbl.innerText.indexOf(m)>=0){
					alert("您输入的姓名"+m+"已经存在，请不要重复添加");
					return false;
				}
				//插入一行
				
				var atr=tbl.insertRow();
				var td1=atr.insertCell();
				var td2=atr.insertCell();
				var td3=atr.insertCell();
				var td4=atr.insertCell();
				td1.innerText=x;
				td2.innerText=m;
				td4.innerHTML = "<a οnclick=alter(" + x+ ") href='#'>修改</a>";
				var s=document.createElement("span");
				s.innerText="删除";
				td3.appendChild(s);
				s.addEventListener('click',function(){
					delrow(s);
				});
			}


			function delrow(elm){
				elm.parentElement.parentElement.remove()
			}
			
			
			function alter(no) {


				//提示用户输入要修改的列数
				var a = window.prompt("请输入要修改的列数");
				a--;


				//如果输入的列数等于第一列，那目前提示用户，不能修改编号
				if (a == 0) {
					alert("不能修改英雄的编号");
					return;
				}
				var mytab = document.getElementById("table");
				for (var i = 1; i < mytab.rows.length; i++) { //遍历每一行
					var num = parseInt(mytab.rows[i].cells[0].innerText); //取出每一行的编号
					if (num == no) { //如果遍历的编号等于函数传进来的编号，修改该行
						if (a < mytab.rows[i].cells.length - 1) {
							var cellText = mytab.rows[i].cells[a].innerText;
							mytab.rows[i].cells[a].innerHTML = "<input οnblur=blur1(this," + i + "," + a + ") type='text' value=" + cellText + " style='width:64px'  />";
						}
					}
				}


			}


			function blur1(obj, i, a) {
				document.getElementById("table").rows[i].cells[a].innerText = obj.value;
			}
		</script>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="300px" id="table">
			<tbody><tr>
				<td>序号</td>
				<td>姓名</td>
				<td>删除操作</td>
				<td>修改操作</td>
			</tr>
			<tr>
				<td>1</td>
				<td>宋江</td>
				<td><span οnclick="delrow(this)">删除</span></td>
				<td><a οnclick=alter(1) href='#'>修改</a>
			</tr>
			<tr>
				<td>2</td>
				<td>卢俊义</td>
				<td><span οnclick="delrow(this)">删除</span></td>
				<td><a οnclick=alter(2) href='#'>修改</a>
			</tr>
		</tbody></table>
		<form>
			<p>序号:<input type="text" id="no"></p>
			<p>姓名:<input type="xingming" id="name"></p>
			<p><button type="button" id="add" οnclick="a()">添加</button></p>
		</form>
	
</body></html>