js 实现html 的table 的增删改存

最新推荐文章于 2024-05-18 13:50:21 发布

chain_fei

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量2.2k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/chain_fei/article/details/78023033

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style type="text/css">
		#tab tr td{
			
			text-align: center;
		}
	</style>	
		
	</head>
	<body>
			<table id="tab" border="1px solid" bordercolor="lightblue" cellspacing="0" width="500px" >
				<tr>
					<th width="150px">姓名</th>
					<th width="150px">年龄</th>
					<th width="200px">操作</th>
				</tr>
				<tr>
					<td>张三</td>
					<td>18</td>
					<td>
						<input type="button" name="" id=""  οnclick="dele(this)" value="删除" />
						<input type="button" name="" id="" οnclick='update(this)'  value="修改" />
					</td>
				</tr>
				<tr>
					<td>张四</td>
					<td>18</td>
					<td>
						<input type="button" name="" id="" οnclick="dele(this)" value="删除" />
						<input type="button" name="" id="" οnclick='update(this)' value="修改" />
					</td>
				</tr>
				
				<tr>
					<td colspan="3">
						<input type="button" οnclick="addRow()" value="添加信息"/>
					</td>
				</tr>
			</table>
	</body>
	<script type="text/javascript">
		function  addRow(){
			var tab = document.getElementById("tab");
			//alert(tab.rows.length)
			 var rownum = tab.rows.length;// 行数
			 var newRow=tab.insertRow(rownum-1);
			
			var cellname = newRow.insertCell(0);
			 cellname.innerHTML="<input type='text' value='' />";
			 
			var cellage = newRow.insertCell(1);
			 cellage.innerHTML="<input type='number' value='' size='10' />"; 
			 var action = newRow.insertCell(2);
			 action.innerHTML="<input type='button' name='' id='' οnclick='dele(this)' value='删除' /><input type='button' name='' id='' οnclick='save(this)' value='保存' />"
		}
		
		function save(obj){
//			alert(obj.parentNode.parentNode.innerHTML)
			var tr = obj.parentNode.parentNode; // 获取的本行的tr 
		//	alert(tr.cells[0].childNodes[0].value)
			tr.cells[0].innerHTML = tr.cells[0].childNodes[0].value
			tr.cells[1].innerHTML = tr.cells[1].childNodes[0].value
			tr.cells[2].innerHTML = "<input type='button' name='' οnclick='dele(this)' id='' value='删除' /><input type='button' name='' id=''  οnclick='update(this)' value='修改' />"
		}
		
		function dele(obj){
			var otr = obj.parentNode.parentNode;
//			var tab = document.getElementById("tab");
//			tab.deleteRow(otr.rowIndex)
			var tab =  otr.parentNode; //自己的父节点 就是table  
			tab.removeChild(otr);
		}
		
		function update(obj){
//			alert(obj.parentNode.parentNode.innerHTML)
			var tr = obj.parentNode.parentNode; // 获取的本行的tr 
		//	alert(tr.cells[0].childNodes[0].value)
			tr.cells[0].innerHTML = "<input type='text' value='"+tr.cells[0].innerHTML+"' size='10' />";
			tr.cells[1].innerHTML = "<input type='number' value='"+tr.cells[1].innerHTML+"' size='10' />";
			tr.cells[2].innerHTML = "<input type='button' name='' οnclick='dele(this)' id='' value='删除' /><input type='button' name='' οnclick='save(this)' id=''  value='保存' />"
		}
	</script>
</html>