课程管理系统（修改课程信息）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

页面布局：

    <div>
    <table class="tab">
        <caption>课程管理</caption>
        <thead>
            <tr>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>课时</th>
                <th>年级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="tbody"></tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button class="one">首页</button>
                    <button class="on">上一页</button>
                    <span class="pageIndex"></span>
                    <span>/</span>
                    <span class="pageAll"></span>
                    <button class="next">下一页</button>
                    <button class="last">尾页</button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

设置一个空的tbody就是为了了后面根据后端数据添加到Tbody里

    <div class="box1">
    <!-- subjectId：课程编号

subjectName：课程名称 classHour：课时 gradeId：年级编号 ) -->

    <ul>
        <li>

            课程编号：
            <input type="text" class="subjectId">
        </li>
        <li>

            课程名称：
            <input type="text" class="subjectName">
        </li>
        <li>

            课时：
            <input type="text" class="classHour">

        </li>
        <li>
            年级编号：<input type="text" class="gradeId">

        </li>
        <li>
            <button class="queding">确定</button>
            <button class="quxiao">取消</button>
        </li>
</div>

页面分页：

    <script>
    let pageIndex = 1
    let pageAll = 1
    let pageSize = 1
    function fn() {
        $(".tbody").html("")
        $.get("https://www.bingjs.com:8001/Subject/GetSubjectsConditionPages", {
            pageIndex: pageIndex,
            pageSize: 5,
        }, function (a) {
            let { count, data } = a
            data.forEach(key => {
                let tr = $(`
                <tr>
                    <td>${key.SubjectId}</td>
                    <td>${key.SubjectName}</td>
                    <td>${key.ClassHour}</td>
                    <td>${key.GradeId}</td>
                    <td>

当点击修改调用函数fa()

                        <button class="xiugai" onclick="fa(${key.SubjectId})">修改</button>
                        </td>
                    </tr>
                `
                )
                $(".tbody").append(tr)
            });
            pageAll = Math.ceil(count / 5)
            $(".pageIndex").html(pageIndex)
            $(".pageAll").html(pageAll)
            // //调用修改
            fa(subjectId)
        })
    }

    fn()

点击首页，页码=1，也就是跳转到首页

    // 首页
    $(".one").click(function () {
        pageIndex = 1
        fn()
    })

点击尾页，页码跳到总页码，也就是尾页

    // 尾页
    $(".last").click(function () {
        pageIndex = pageAll
        fn()
    })
    

点击下一页，页码加一，意思就是到最后一页点击下一页不会动了

    //下一页
    $(".next").click(function () {
        if (pageIndex++ >= pageAll) {
            pageIndex = pageAll
        }
        fn()
    })
    

点击上一页，页码减1，也就是到第一页点击上一页无反应

    //上一页
    $(".on").click(function () {
        if (pageIndex-- <= 1) {
            pageIndex = 1
        }
        fn()
    })
    

修改数据

post安全性比get高，所以post一般用于数据修改

         function fa(subjectId) {
        $(".box1").show()
        $.get("https://www.bingjs.com:8001/Subject/GetSubjectById", {
            subjectId
        }, function (res) {
            console.log(res)

点击修改获取相应行中的值

            $(".subjectId").val(res.SubjectId)
            $(".subjectName").val(res.SubjectName)
            $(".classHour").val(res.ClassHour)
            $(".gradeId").val(res.GradeId)

        })
        $(".queding").click(function () {
 
            let subjectId = $(".subjectId").val()
            let subjectName = $(".subjectName").val()
            let classHour = $(".classHour").val()
            let gradeId = $(".gradeId").val()
            $.post("https://www.bingjs.com:8001/Subject/Update", {
                subjectId,
                subjectName,
                classHour,
                gradeId,
            }, function (item) {
                if (item) {
                    alert("修改成功")
                }
                fn()
                $(".subjectId").val("")
                $(".subjectName").val("")
                $(".classHour").val("")
                $(".gradeId").val("")

            })
        })

    }
    $(".quxiao").click(function () {
        $(".box1").hide()
    })
    

点击修改，会把表格中的数据赋值给修改框，只需要修改修改框中的值，点击提交就可以修改成功

点击取消按钮，修改框会隐藏