2020/7/21 完成网页学生管理系统 实现弹窗添加，编辑

//body加载完毕执行
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>'
    }
    tbody.innerHTML=msg
}
function updateById(id) {
    let info=getStudentInfoById(id)
    show()
    // 选中要改的id,'disabled',''修改时改其他，学号不能改
    let sid = document.getElementById('sid');
    sid.value=info.id
    sid.setAttribute('disabled','')
    
    // 填充要修改的内容
    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 deleteById(id) {
    if (confirm('是否确定删除')){
        let index=getStudentIndexById(id)
        // splice 删除，数组里面没有move
        slist.splice(index,1)
        // 删完之后重新加载表格
        loadTable()
   }
}
//添加学生信息时弹出div2框
function addStudent(){
    // 确保点添加的时候取消旁边是显示添加
    document.getElementById('btn1').value='添加'
    // let sid = document.getElementById('sid');
    // sid.removeAttribute('disabled')
    show()
}
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 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()
}