渡课学习第20天

最新推荐文章于 2023-01-30 13:13:59 发布
xiaozhaozhao03
最新推荐文章于 2023-01-30 13:13:59 发布
阅读量152
点赞数
CC 4.0 BY-SA版权
分类专栏：学习日记
本文链接：https://blog.youkuaiyun.com/xiaozhaozhao03/article/details/81489882
学习日记专栏收录该内容
22 篇文章
订阅专栏
今日学习内容：

1.jQuery 的遍历；
2.使用 jQuery 完成基础的表单增删改查操作案。
<!DOCTYPE html>
<html>
<head>
    <title>学生基本信息维护</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        var stus = [{
            id:"1",
            username:"zhangsan",
            stuNum:"S01",
            sex:"man",
            description:"xxxxx"
        },
        {
            id:"2",
            username:"lisi",
            stuNum:"S02",
            sex:"man",
            description:"xxxxx"
        },
        {
            id:"3",
            username:"wangwu",
            stuNum:"S03",
            sex:"man",
            description:"xxxxx"
        }];

        var id = 0; // 全局的ID变量

        var saveType = "add";
        var editId = -1;

        // 重置表格的序号
        var resetSeq = function() {
            $(".seq").each(function(index, element){
                $(element).html(index + 1);
            });
        }

        // 添加表单元素内容到表格中
        var saveStu = function() {

            var checkFlag = true;

            if (saveType == "add") {
                if (confirm("确认要添加记录吗？")) {
                    // step1:获取表单内容
                    var username = $("#stuFrm").find("input[name='username']").val();
                    var stuNum = $("#stuFrm").find("input[name='stuNum']").val();
                    var sex = $("#stuFrm").find("select[name='sex']").val();
                    var description = $("#stuFrm").find("textarea[name='description']").val();

                    if (username.trim().length < 2 || username.trim().length > 4) {
                        checkFlag = false;
                    }

                    if (!checkFlag) {
                        alert("表单验证失败");
                        return;
                    }

                    // step2:构建tr元素
                    var stuTr = "<tr id='stu_"+id+"'><td class='seq'>1</td><td id='username_"+id+"'>"+username+"</td><td id='stuNum_"+id+"'>"+stuNum+"</td><td id='sex_"+id+"'>"+sex+"</td><td id='description_"+id+"'>"+description+"</td><td><a href='javascript:editStu("+id+")'>修改</a>&nbsp;<a href='javascript:delStu("+id+");'>删除</a></td></tr>";

                    // step3:将tr元素追加到tbody中
                    $("#stuTbody").append(stuTr);
                    id++;
                }
                resetSeq();
            }

            if (saveType == "edit") {
                if (confirm("确认要编辑记录吗？")) {
                    // step1:获取表单内容
                    var username = $("#stuFrm").find("input[name='username']").val();
                    var stuNum = $("#stuFrm").find("input[name='stuNum']").val();
                    var sex = $("#stuFrm").find("select[name='sex']").val();
                    var description = $("#stuFrm").find("textarea[name='description']").val();

                    if (username.trim().length < 2 || username.trim().length > 4) {
                        checkFlag = false;
                    }

                    if (!checkFlag) {
                        alert("表单验证失败");
                        return;
                    }

                    // 修改对应ID元素的值
                    $("#username_" + editId).html(username);
                    $("#stuNum_" + editId).html(stuNum);
                    $("#sex_" + editId).html(sex);
                    $("#description_" + editId).html(description);

                    // 将表单元素内容置空，同时保存模式变成新增
                    $("#stuFrm").find("input[name='username']").val("");
                    $("#stuFrm").find("input[name='stuNum']").val("")
                    $("#stuFrm").find("select[name='sex']").val("");
                    $("#stuFrm").find("textarea[name='description']").val("");

                    saveType = "add";
                    editId = -1;
                }
            }

        }

        // 删除学生记录
        var delStu = function(id) {
            if (confirm("确认要删除所选的记录吗？")){
                $("#stu_"+id).remove();
                resetSeq();
            }
        }

        var editStu = function(id) {
            // 取出表格中的内容
            var username = $("#username_" + id).html();
            var stuNum = $("#stuNum_" + id).html();
            var sex = $("#sex_" + id).html();
            var description = $("#description_" + id).html();

            // 将内容赋值给表单对应元素
            $("#stuFrm").find("input[name='username']").val(username);
            $("#stuFrm").find("input[name='stuNum']").val(stuNum);
            $("#stuFrm").find("select[name='sex']").val(sex);
            $("#stuFrm").find("textarea[name='description']").val(description);

            saveType = "edit";
            editId = id;
        }

        $(function(){
            // 页面事件的注册
            $("#saveBtn").click(saveStu);

            // 加载初始化学生信息
            for (var i = 0; i < stus.length; i++) {
                var username = stus[i].username;
                var stuNum = stus[i].stuNum;
                var sex = stus[i].sex;
                var description = stus[i].description;
                // step2:构建tr元素
                var stuTr = "<tr id='stu_"+id+"'><td class='seq'>1</td><td id='username_"+id+"'>"+username+"</td><td id='stuNum_"+id+"'>"+stuNum+"</td><td id='sex_"+id+"'>"+sex+"</td><td id='description_"+id+"'>"+description+"</td><td><a href='javascript:editStu("+id+")'>修改</a>&nbsp;<a href='javascript:delStu("+id+");'>删除</a></td></tr>";

                // step3:将tr元素追加到tbody中
                $("#stuTbody").append(stuTr);
                id++;
            }
            resetSeq();


        })

    </script>


</head>
<body>
    <h1>1807班学生基本信息</h1>
    <div>
        <form id="stuFrm">
            <span>姓名：</span><input type="text" name="username">&nbsp;
            <span>学号：</span><input type="text" name="stuNum">&nbsp;
            <span>性别：</span>
            <select name="sex">
                <option value="">请选择</option>
                <option value="man">男</option>
                <option value="woman">女</option>
            </select><br>
            <span>个人介绍：</span><textarea name="description"></textarea><br>
            <input type="button" id="addBtn" value="新增">&nbsp;<input type="button" id="saveBtn" value="保存">
        </form>
    </div>
    <hr>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>性别</th>
                    <th>个人介绍</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="stuTbody">

            </tbody>
        </table>
    </div>

</body>
</html>