一款漂亮的排班系统界面Html+jQuery「代码片段」

以下是一个简单的HTML和jQuery代码示例，用于创建一个排班系统的用户界面。这个例子提供了一个基本的界面布局和交互功能，但具体的后端逻辑和数据库设计需要根据实际需求来实现。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排班系统界面</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="schedule-container">
        <h1>排班系统</h1>
        <table id="schedule-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>时间段</th>
                    <th>教师</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 排班数据动态生成 -->
            </tbody>
        </table>
        <button id="add-shift">添加排班</button>
    </div>
 
    <script>
        $(document).ready(function() {
            // 假设的数据
            var shifts = [
                // ...
            ];
 
            // 初始化表格
            function initTable(shifts) {
                var rows = '';
                for (var i = 0; i < shifts.length; i++) {
                    rows += '<tr>' +
                                '<td>' + shifts[i].date + '</td>' +
                                '<td>' + shifts[i].time + '</td>' +
                                '<td>' + shifts[i].teacher + '</td>' +
                                '<td><button class="delete-shift">删除</button></td>' +
                            '</tr>';
                }
                $('#schedule-table tbody').html(rows);
            }
 
            // 添加排班
            $('#add-shift').click(function() {
                // 打开一个模态框或者直接跳转到添加页面
                alert('添加排班');
            });
 
            // 删除排班
            $('#schedule-table').on('click', '.delete-shift', function() {
                var shift = $(this).closest('tr').find('td').map(function() {
                    return $(this).text();
                }).get();
                // 模拟删除操作
                alert('删除排班: ' + shift);
                // 实际应用中，这里应该发送请求到后端删除数据
            });
 
            initTable(shifts); // 初始化表格数据
        });
    </script>
</body>
</html>

这段代码提供了一个基本的排班系统界面，并且展示了如何使用jQuery来处理事件。在实际应用中，你需要根据具体需求来扩展和完善这个界面，比如添加模态框来输入排班详情、删除确认对话框、分页功能、搜索排班功能等。同时，你还需要编写后端逻辑来处理数据的添加、删除和展示。

一款漂亮的排班系统界面Html+jQuery「代码片段」

评论已关闭

推荐阅读