loveJavaJava

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=""
        
    }

分类:

技术点:

相关文章: