js动态表格

动态表格

<html>
	<head>
		<title>动态表格</title>
		<style type="text/css">
			table{
     
				width:500px;
				text-align:center;
				
			}
			div{
     
				text-align:center;
			}
		</style>
		<script type="text/javascript">
			function add(){
     
					var i=2;
					var number=document.all.number.value;
					var name =document.all.name.value;
					var gender=document.all.gender.value;
					var table=document.getElementById("table");
					var trs=document.getElementsByTagName("tr");
						
						
					var html="";
							html += ""+(trs.length)+"";
							html += ""+number+"";
							html += ""+name+"";
							html += ""+gender+"";
							html += "删除";
							html += "";
							table.innerHTML +=html;
					
						
			}
				function retest(){
     
					var trs=document.getElementsByTagName("tr");
					//var tr = obj.parentNode.parentNode;
					for(var i=1;i<=trs.length;i++){
     
							//trs[i].removeChild(tr);
							//trs[].firstChild.innerHTML=i;//firstChild获得的元素子节点,包括了空格或换行
							trs[i].firstElementChild.innerHTML = i; //firstElementChild获得元素的子节点,不包括空格及换行
					}
				}

			//删除方法
			function del(obj){
     
				var table = obj.parentNode.parentNode.parentNode;
				var tr = obj.parentNode.parentNode;
				table.removeChild(tr);
				retest();
			}

		</script>
	</head>
	<body>
		<div>
		<input type="text" name="number" id="id" placeholder="请输入编号:">
		<input type="text" name="name" id="name" placeholder="请输入姓名:">
		<input type="text" name="gender" id="gender" placeholder="请输入性别:">
		<input type="button" value="添加" onclick="add()">
		<br><br>
		</div>
		<table border="1" cellspacing="0" align="center" id="table">
			<caption>学生信息表</caption>
			<tr>
				<td>序号</td>
				<td>编号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>1</td>
				<td>001</td>
				<td>张三</td>
				<td></td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>002</td>
				<td>唯唯喏</td>
				<td></td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
		</table>
		
	</body>
</html>

js动态表格_第1张图片

你可能感兴趣的:(js,前端小项目)