lovecoding
/
VIP23


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<style>

    table,tr, td, th{
        border: 1px solid black;
    }

</style>
<body>
<!-- 序号 姓名 密码 学校 性别 地址 电话  学生表  -->
<h1>用户列表</h1>
<table cellspacing="0px" cellpadding="0px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>学校</th>
        <th>性别</th>
        <th>地址</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
    <tr>
        <td class="number">1</td>
        <td>张三</td>
        <td>123123</td>
        <td>黑龙江大学</td>
        <td>男</td>
        <td>北京</td>
        <td>15555555555</td>
        <td>
            <a href="#" class="del" onclick="del(this)" >删除</a>
            <a href="#" class="edit" >修改</a>
        </td>
    </tr>
</table>

<hr>
<table border="1px">
    <thead><h1>用户信息</h1></thead>
    <tbody>
    <tr>
        <td>用户名：</td>
        <td><input type="text" name="username" placeholder="请输入用户名" ></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="password" name="password" placeholder="请输入面膜" ></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" name="sex" value="0" >女
            <input type="radio" name="sex" value="1" checked >男
        </td>
    </tr>
    <tr>
        <td>学校：</td>
        <td>
            <select name="school" id="school" >
                <option value="1">---请选择---</option>
                <option value="2">---黑大---</option>
                <option value="3">---理工---</option>
                <option value="4">---黑工程---</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>地址：</td>
        <td><input type="text" name="address" placeholder="请输入地址" ></td>
    </tr>
    <tr>
        <td>电话：</td>
        <td><input type="tel" name="phone" placeholder="请输入电话" ></td>
    </tr>
    <tr>
        <td colspan="2">
            <button id="btn" type="submit" >添加</button>

            <button id="btnEdit" type="submit" >确认修改</button>
        </td>
    </tr>
    </tbody>
</table>

</body>
</html>
<script>

    //获取value值信息
    function addUser(){
        //获取用户名
        let username = document.getElementsByName("username")[0].value;

        let password = document.getElementsByName("password")[0].value;

        //console.log(username)
        let sex = document.getElementsByName("sex");

        let sexElement = "";
        for (let i = 0; i < sex.length ; i++) {
            if (sex[i].checked){
                sexElement = sex[i].value == 0 ? "女" : "男";
            }
        }
        //console.log(sexElement)

        //获取学校
        //school
        let school = document.getElementById("school");

        //console.log(school.value)

        /*
        <option value="1">---请选择---</option>
                <option value="2">---黑大---</option>
                <option value="3">---理工---</option>
                <option value="4">---黑工程---</option>
         */

        let schoolName = "";
        if (school.value=="1"){
            alert("请选择学校")
            return;
        }else if(school.value=="2"){
            schoolName = "黑大"
        }else if(school.value=="3"){
            schoolName = "理工"
        }else if(school.value=="4"){
            schoolName = "黑工程"
        }

        let address = document.getElementsByName("address")[0].value;
        let phone = document.getElementsByName("phone")[0].value;

        //拼接 innerHtml

        let tableElement = document.getElementsByTagName("table")[0];

        let length = tableElement.children.length;
        //console.log(length)

        //"+(length+1)+"

        let trStr = "<tr>\n" +
            "        <td class=\"number\" >"+(length+1)+"</td>\n" +
            "        <td>"+username+"</td>\n" +
            "        <td>"+password+"</td>\n" +
            "        <td>"+schoolName+"</td>\n" +
            "        <td>"+sexElement+"</td>\n" +
            "        <td>"+address+"</td>\n" +
            "        <td>"+phone+"</td>\n" +
            "        <td>\n" +
            "            <a href=\"#\" class=\"del\" onclick=\"del(this)\" >删除</a>\n" +
            "            <a href=\"#\" class=\"edit\" >修改</a>\n" +
            "        </td>\n" +
            "    </tr>";

        //table添加
        tableElement.innerHTML += trStr;

        //添加事件
        addOnClickEvent();
    }

    document.getElementById("btn").onclick = addUser;


    /*
        删除
     */
    function del(t){
        //获取父元素
        //t.parentElement.parentElement.remove();
    }

    /*
        添加之后  清空添加列表
     */

    /*
        修改操作

        回显 td内容 innerText 文本

        难点：
        单选和多选的回显

        替换
        后者先删除 后添加方式

     */

    /*
        添加点击事件
     */
    function addOnClickEvent(){


        let dels = document.getElementsByClassName("del");

        for (let i = 0; i < dels.length ; i++) {
            dels[i].onclick = delThis;
        }

        let edit = document.getElementsByClassName("edit");

        for (let i = 0; i < edit.length ; i++) {
            edit[i].onclick = editThis;
        }

    }

    /*
        删除
     */
    function delThis(){
        this.parentElement.parentElement.remove();
        console.log(this)
    }

    //修改序号标识
    let editNumber = 0;

    /*
        修改回显
     */
    function editThis(){
        //console.log(this)
        //获取tr
        let tr =  this.parentElement.parentElement;

        let td1 = tr.children[0].innerText;

        editNumber = td1;

        let td2 = tr.children[1].innerText;
        let td3 = tr.children[2].innerText;
        let td4 = tr.children[3].innerText;
        let td5 = tr.children[4].innerText;
        let td6 = tr.children[5].innerText;
        let td7 = tr.children[6].innerText;


        //回显
        document.getElementsByName("username")[0].value = td2;
        document.getElementsByName("password")[0].value = td3 ;

        //回显学校信息
        let school = document.getElementById("school");

        let schoolNumber = "";
        if (td4=="黑大"){
            schoolNumber="2"
        }else if(td4=="理工"){
            schoolNumber = "3"
        }else if(td4=="黑工程"){
            schoolNumber = "4"
        }else{
            schoolNumber = "1"
        }

        //获取
        for (let i = 0; i < school.children.length; i++) {
            if (school[i].value == schoolNumber){
                school[i].selected = true;
            }
        }

        //回显性别信息
        let sex = document.getElementsByName("sex");

        let sexElement = "";
        //男是1 女是0
        let s = td5 == "男" ? "1" : "0";
        console.log(s)
        for (let i = 0; i < sex.length ; i++) {
            if (sex[i].value == s){
                sex[i].checked = true;
            }
        }

        document.getElementsByName("address")[0].value = td6;
        document.getElementsByName("phone")[0].value = td7;

    }


    //修改保存
    function editSave(){
        let td1s =  document.getElementsByClassName("number");

        for (let i = 0; i < td1s.length; i++) {
            if (td1s[i].innerText == editNumber){
                //构建新tr 替换td1s[i]
                let tr = buildTr()
                let old = td1s[i].parentElement;
                let parent = td1s[i].parentElement.parentElement;
                console.log(tr)
                console.log(old)
                parent.replaceChild(tr,old)
            }
        }
    }

    document.getElementById("btnEdit").onclick = editSave;

    function buildTr(){
        //获取用户名
        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;
        let sex = document.getElementsByName("sex");
        let sexElement = "";
        for (let i = 0; i < sex.length ; i++) {
            if (sex[i].checked){
                sexElement = sex[i].value == 0 ? "女" : "男";
            }
        }
        //获取学校
        let school = document.getElementById("school");
        let schoolName = "";
        if (school.value=="1"){
            alert("请选择学校")
            return;
        }else if(school.value=="2"){
            schoolName = "黑大"
        }else if(school.value=="3"){
            schoolName = "理工"
        }else if(school.value=="4"){
            schoolName = "黑工程"
        }

        let address = document.getElementsByName("address")[0].value;
        let phone = document.getElementsByName("phone")[0].value;

        //构建tr
        let tr = document.createElement("tr");

        tr.innerHTML = " <td class=\"number\" >"+(editNumber)+"</td>\n" +
            "        <td>"+username+"</td>\n" +
            "        <td>"+password+"</td>\n" +
            "        <td>"+schoolName+"</td>\n" +
            "        <td>"+sexElement+"</td>\n" +
            "        <td>"+address+"</td>\n" +
            "        <td>"+phone+"</td>\n" +
            "        <td>\n" +
            "            <a href=\"#\" class=\"del\" onclick=\"del(this)\" >删除</a>\n" +
            "            <a href=\"#\" class=\"edit\" >修改</a>\n" +
            "        </td>\n" ;

        return tr;

    }

    //调用
    addOnClickEvent()


</script>