<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form class="info" autocomplete="off">
姓名:<input type="text" class="uname" name="uname">
年龄<input type="text" class="age" name="age">
性别：<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资<input type="text" class="salary" name="salary"/>
就业城市<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</body>
</html>
<script>
const uname=document.querySelector('.uname');
const age=document.querySelector('.age');
const gender=document.querySelector('.gender');
const salary=document.querySelector('.salary');
const city=document.querySelector('.city');
const tbody=document.querySelector('tbody');
const items=document.querySelectorAll("[name]");
const arr=[];
const info=document.querySelector('.info');
info.addEventListener('submit',function(e){
e.preventDefault();
for(let i=0;i<items.length;i++){
if(items[i].value===''){
return alert('内容不能为空');
}
}
const obj={
stuId:arr.length+1,
uname:uname.value,
age:age.value,
gender:gender.value,
salary:salary.value,
city:city.value,
};
//console.log(obj);
//追加给数组
arr.push(obj);
console.log(arr);
//清空表单
this.reset();
//调用渲染函数
render();//渲染 调用底下那个渲染函数啊
});
//渲染函数
function render(){
//遍历arr数组
tbody.innerHTML='';//清空下tbody,
for(let i=0;i<arr.length;i++){
//生成tr
const tr=document.createElement('tr'); //不懂这句放在for好 for里面好
tr.innerHTML=`
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id=${i}>删除</a>
</td>`
//追加元素 父元素.appendChild
tbody.appendChild(tr);
}
}
//删除操作
//事件委托
tbody.addEventListener('click',function(e){
if(e.target.tagName==='A'){
console.log(e.target.dataset.id);
arr.splice(e.target.dataset.id,1);
console.log(arr);
render();//重新渲染下
}
})
</script>
标签：arr,const,TOMCAT,tbody,JS,uname,HTML,querySelector,document From： https://www.cnblogs.com/tomcat2022/p/17660733.html