学生信息系统录入与显示案例

练习心得

1、了解原生js的DOM底层操作，元素节点的增删改查

2、了解事件委托、了解 为元素绑定新属性

案例展示

JS逻辑核心代码

功能：1、数据的录入  2、数据实时刷新更新到前端页面

<script>
	//定义一个数组存储学生信息 根据数组里的数据实时渲染到前端页面
	//用户点击录入即存储数据
	let student=[{
		id:1,
		name:"关羽",
		age:"22",
		sex:"男",
		selery:12000,
		city:"咸阳"
	},{
		id:2,
		name:"刘备",
		age:"24",
		sex:"男",
		selery:50000,
		city:"荆州"
	}];//默认数组里有两条数据

	const tbody=document.querySelector("tbody");
    
	let id=student.length+1;//

	let form=document.querySelector("form");

	//事件委托
	tbody.addEventListener("click",function(e){
		if(e.target.tagName==="A"){
			confirm(`确定要删除---${e.target.parentNode.parentNode.children[1].textContent}---吗`)?student.splice(e.target['data-id'],1):"";
			render();
		}
		
	})
    //渲染前端页面
	render();
	
	//增加学生信息 函数
	function addStuMessage(){
		let obj=document.querySelectorAll("[name]");//通过属性获取对应的元素
		//阻止表单提交默认的行为
		form.addEventListener("submit",function(e){
			e.preventDefault();
			this.reset();
		})
		for(let i=0;i<obj.length;i++){
			if(obj[i].value===""){
				alert("数据不能为空");
				return;
			}
		}
		id=id;
		let name=obj[0].value;
		let age=obj[1].value;
		let sex=obj[2].value;
		let selery=obj[3].value;
		let city=obj[4].value;
		student.push({
			id:id,
			name:name,
			age:age,
			sex:sex,
			selery:selery,
			city:city
		})
		id++;
	   //增加完成后，需要重新刷新渲染页面
		render();
	}
	//渲染函数
	function render(){
		tbody.innerHTML="";
		for(let key in student){
			let tr=document.createElement("tr");
			tbody.appendChild(tr);
			for(keys in student[key]){
				let td=document.createElement("td");
				td.textContent=student[key][keys];
				tr.appendChild(td);
			}

			let deleteObje=document.createElement("td");

			tr.appendChild(deleteObje);

			let a=document.createElement("a");
			a.textContent="删除";
			a['data-id']=key;
			a.href="javascript:"
			deleteObje.appendChild(a);
		}
	}
	
</script>

总结

1、适合对前端感兴趣的新手小白练习，练习的目的 一方面加深对前端DOM底层操作，另一方面通过一个个小案例练习逐渐完善 编写代码的顺序与逻辑思考。同时也能感受到js编程带来的乐趣。

2、小白进阶大神不是一步之遥，知识是慢慢积累的，加油！加油！加油！

种一棵树最好的时间在十年前，然后是现在。

我是代码小白鸽，爱前端、爱编程、爱智能化的时代，欢迎交流。