function load(){
loadTable()
}
function loadTable(){
let tbody = document.querySelector(\'#tbody\');
let msg=""
for(let i=0;i<slist.length;i++){
msg+=\'<tr>\'
msg+=\'<td>\'+(i+1)+\'</td>\'
msg+=\'<td>\'+slist[i].id+\'</td>\'
msg+=\'<td>\'+slist[i].name+\'</td>\'
msg+=\'<td>\'+slist[i].pwd+\'</td>\'
msg+=\'<td>\'+slist[i].sex+\'</td>\'
msg+=\'<td>\'+slist[i].address+\'</td>\'
msg+=\'<td>\'+getClassNameById(slist[i].classid)+\'</td>\'
msg+=\'<td><a href="javascript:deleteById(\'+slist[i].id+\')">删除</a> <a href="javascript:updateById(\'+slist[i].id+\')">修改</a> </td>\'
msg+=\'</tr>\'
}
// msg放到tbody
tbody.innerHTML=msg
}
//删除数据
function deleteById(id) {
if (confirm(\'是否确定删除\')){
let index=getStudentIndexById(id)
// splice 删除,数组里面没有move
slist.splice(index,1)
// 删完之后重新加载表格
loadTable()
}
}
function show() {
let div1=document.getElementById("div1")
let div2=document.getElementById("div2")
div1.removeAttribute(\'hidden\')
div2.removeAttribute(\'hidden\')
}
// 取消时隐藏起div2框
function cancal() {
let div1=document.getElementById("div1")
let div2=document.getElementById("div2")
div1.setAttribute(\'hidden\',\'\')
div2.setAttribute(\'hidden\',\'\')
}
function addStudent(){
// 确保点添加的时候取消旁边是显示添加
document.getElementById(\'btn1\').value=\'添加\'
clear()
show()
}
//保存和添加按钮
function save() {
let id=document.getElementById(\'sid\').value
let name=document.getElementById(\'sname\').value
let pwd=document.getElementById(\'spwd\').value
//两个单选 getElementsByName按名称找
let sexs=document.getElementsByName(\'sexs\')
let sex=\'男\'
for (let i=0;i<sexs.length;i++){
if (sexs[i].checked){
sex=sexs[i].value
}
}
let address=document.getElementById(\'address\').value
let classid=document.getElementById(\'classid\').value
//创建对象,上面是给文本框一些新的值,现在创建声明新的学生并且传id,name,pwd,sex,address,classid参数进来
let info=new Student(id,name,pwd,sex,address,classid)
// 如果是添加的时候那就加,否则是保存(修改)123把第二个元素改了,就把新值赋到第二个元素,第二个元素整体赋值
if(document.getElementById(\'btn1\').value==\'添加\'){
//加入集合 ,加入是加在末尾
// slist[getStudentIndexById(id)]=info用新的值覆盖之前的就是修改,对应保存按钮
slist[slist.length]=info
}else{
slist[getStudentIndexById(id)]=info
}
//重新加载table
loadTable()
// 关界面
cancal()
}
function updateById(id) {
let info=getStudentInfoById(id)
show()
// 选中要改的id,\'disabled\',\'\'修改时改其他,学号不能改
let sid = document.getElementById(\'sid\');
sid.value=info.id
sid.setAttribute(\'disabled\',\'\')
// 填充要修改的内容 getElementById根据ID获取单个对象
document.getElementById(\'sname\').value=info.name;
document.getElementById(\'spwd\').value=info.pwd;
// \'input[name="sexs"][value="\'+info.sex+\'"]\'我是男,你就是男,setAttribute(\'checked\',\'checked\')修改选中的
document.querySelector(\'input[name="sexs"][value="\'+info.sex+\'"]\').setAttribute(\'checked\',\'checked\')
document.getElementById(\'address\').value=info.address
document.getElementById(\'classid\').value=info.classid
// 默认点添加按钮的时候是取消旁边的 是添加,点编辑时候变成保存
document.getElementById(\'btn1\').value=\'保存\'
}
function onsearchStudent(){
// 确保点添加的时候取消旁边是显示添加
document.getElementById(\'btn2\').value=\'查询\'
clear()
show()
}
function search(){
// 拿到div2弹框的第一行学号
let id=document.getElementById(\'sid\').value
// 通过id找到下标,通过下标找到学生
let index=getStudentIndexById(id)
let stu=slist[index]
// document.getElementById(\'sname\').value 弹框姓名那栏的文本内容
// document.getElementById(\'sname\').value=stu.name;找到之后把学生的名字赋给名字文本框
document.getElementById(\'sname\').value=stu.name;
sname.setAttribute(\'disabled\',\'\')
document.getElementById(\'spwd\').value=stu.pwd;
// \'input[name="sexs"][value="\'+info.sex+\'"]\'我是男,你就是男,setAttribute(\'checked\',\'checked\')修改选中的
document.querySelector(\'input[name="sexs"][value="\'+stu.sex+\'"]\').setAttribute(\'checked\',\'checked\')
document.getElementById(\'address\').value=stu.address
document.getElementById(\'classid\').value=stu.classid
// 默认点添加按钮的时候是取消旁边的 是添加,点编辑时候变成保存
document.getElementById(\'btn2\').value=\'查询\'
}
function clear(){
// js里面""是空 null是类似未定义
document.getElementById(\'sid\').value=""
document.getElementById(\'sname\').value=""
document.getElementById(\'spwd\').value=""
//getElementsByName根据name属性获取多个对象sexs获取了男女给声明的list数组,list[0]男 list[0].checked选中的那个
let list=document.getElementsByName(\'sexs\')
list[0].checked=false
list[1].checked=false
document.getElementById(\'address\').value=""
document.getElementById(\'classid\').value=""
}
相关文章: