发布作者：
admin
百度收录：
正在检测是否收录...
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
版权声明：
本文章只供参考不代表任何意见，
当前文章数据信息，图片均引用百度;抖音等用户发布信息整理，若有侵权行为，再此深感抱歉，联系客服删除！
感谢理解！只为免费服务于广大考生。
关键词搜索
热门文章
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校专业筛选系统</title>
<script src="https://cdn.tailwindcss.com/3.3.3"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #f8fafc;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.filter-item {
transition: all 0.2s ease;
}
.filter-item:hover {
transform: translateY(-2px);
}
.table-container {
max-height: 70vh;
overflow-y: auto;
}
.table-row:hover {
background-color: #f1f5f9;
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">学校专业筛选系统</h1>
<p class="text-gray-600">2024年职业教育专业数据查询</p>
</div>
<!-- 筛选按钮 -->
<div class="flex justify-center mb-8">
<button id="filterBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-md transition-all duration-300 transform hover:scale-105">
<i class="fas fa-filter mr-2"></i>筛选条件
</button>
</div>
<!-- 数据表格 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="table-container">
<table class="w-full">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学校名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业类别</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年份</th>
</tr>
</thead>
<tbody id="dataTable" class="divide-y divide-gray-200">
<!-- 数据将通过JS动态填充 -->
</tbody>
</table>
</div>
</div>
</div>
<!-- 筛选模态框 -->
<div id="filterModal" class="modal-overlay hidden">
<div class="modal-content">
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-semibold text-gray-800">筛选条件</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-6">
<!-- 年份 -->
<div class="filter-item bg-gray-50 p-4 rounded-lg">
<label class="block text-sm font-medium text-gray-700 mb-2">年份</label>
<input type="text" value="2024" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" disabled>
</div>
<!-- 类别 -->
<div class="filter-item bg-gray-50 p-4 rounded-lg">
<label class="block text-sm font-medium text-gray-700 mb-2">专业类别</label>
<select id="categorySelect" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="">全部类别</option>
<option value="现代农艺">现代农艺</option>
<option value="烹饪">烹饪</option>
<option value="畜牧养殖">畜牧养殖</option>
<option value="建筑">建筑</option>
<option value="机械制造">机械制造</option>
<option value="设备维修">设备维修</option>
<option value="机电技术">机电技术</option>
<option value="自动控制">自动控制</option>
<option value="电气技术">电气技术</option>
<option value="电子技术">电子技术</option>
<option value="化工与环境">化工与环境</option>
<option value="服装">服装</option>
<option value="车辆维修">车辆维修</option>
<option value="运输">运输</option>
<option value="数字媒体">数字媒体</option>
<option value="网络技术">网络技术</option>
<option value="软件与应用技术">软件与应用技术</option>
<option value="医学技术">医学技术</option>
<option value="药学">药学</option>
<option value="护理">护理</option>
<option value="财税">财税</option>
<option value="市场营销">市场营销</option>
<option value="电子商务">电子商务</option>
<option value="国际商务">国际商务</option>
<option value="物流管理">物流管理</option>
<option value="酒店管理">酒店管理</option>
<option value="旅游管理">旅游管理</option>
<option value="公共服务与管理">公共服务与管理</option>
<option value="学前教育">学前教育</option>
<option value="艺术设计">艺术设计</option>
</select>
</div>
<!-- 学校 -->
<div class="filter-item bg-gray-50 p-4 rounded-lg">
<label class="block text-sm font-medium text-gray-700 mb-2">学校名称</label>
<input id="schoolInput" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="输入学校名称">
</div>
<!-- 属性 -->
<div class="filter-item bg-gray-50 p-4 rounded-lg">
<label class="block text-sm font-medium text-gray-700 mb-2">学校属性</label>
<div class="space-y-2">
<div class="flex items-center">
<input id="publicRadio" name="schoolType" type="radio" value="公办" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="publicRadio" class="ml-2 block text-sm text-gray-700">公办</label>
</div>
<div class="flex items-center">
<input id="privateRadio" name="schoolType" type="radio" value="民办" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="privateRadio" class="ml-2 block text-sm text-gray-700">民办</label>
</div>
<div class="flex items-center">
<input id="allRadio" name="schoolType" type="radio" value="" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="allRadio" class="ml-2 block text-sm text-gray-700">全部</label>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button id="resetBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
重置
</button>
<button id="applyBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
应用筛选
</button>
</div>
</div>
</div>
</div>
<footer class="bg-gray-100 py-6 mt-12">
<div class="container mx-auto px-4 text-center text-gray-600 text-sm">
<p>created by <a href="https://space.coze.cn" class="text-blue-600 hover:text-blue-800">coze space</a></p>
<p class="mt-1">页面内容均由 AI 生成，仅供参考</p>
</div>
</footer>
<script>
// 模拟数据
const mockData = [
{ school: "北京职业技术学院", category: "机电技术", type: "公办", year: "2024" },
{ school: "上海商贸学校", category: "电子商务", type: "公办", year: "2024" },
{ school: "广州旅游学院", category: "旅游管理", type: "公办", year: "2024" },
{ school: "深圳信息技术学院", category: "网络技术", type: "民办", year: "2024" },
{ school: "成都工业学校", category: "机械制造", type: "公办", year: "2024" },
{ school: "杭州职业技术学院", category: "数字媒体", type: "公办", year: "2024" },
{ school: "武汉医药学院", category: "药学", type: "民办", year: "2024" },
{ school: "西安工程大学", category: "服装", type: "公办", year: "2024" },
{ school: "南京交通学院", category: "运输", type: "公办", year: "2024" },
{ school: "天津电子科技学院", category: "电子技术", type: "民办", year: "2024" },
{ school: "重庆建筑学院", category: "建筑", type: "公办", year: "2024" },
{ school: "长沙商贸旅游学院", category: "酒店管理", type: "公办", year: "2024" },
{ school: "苏州工艺美术学院", category: "艺术设计", type: "民办", year: "2024" },
{ school: "青岛海洋职业技术学院", category: "化工与环境", type: "公办", year: "2024" },
{ school: "大连汽车学院", category: "车辆维修", type: "民办", year: "2024" },
{ school: "厦门软件学院", category: "软件与应用技术", type: "民办", year: "2024" },
{ school: "哈尔滨工业学校", category: "自动控制", type: "公办", year: "2024" },
{ school: "昆明旅游学院", category: "旅游管理", type: "民办", year: "2024" },
{ school: "郑州商贸学院", category: "市场营销", type: "民办", year: "2024" },
{ school: "沈阳机械学院", category: "机械制造", type: "公办", year: "2024" }
];
// 页面加载时显示模态框
document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('filterModal');
modal.classList.remove('hidden');
// 初始渲染所有数据
renderTable(mockData);
});
// 筛选按钮点击事件
document.getElementById('filterBtn').addEventListener('click', function() {
const modal = document.getElementById('filterModal');
modal.classList.remove('hidden');
});
// 关闭模态框
document.getElementById('closeModal').addEventListener('click', function() {
const modal = document.getElementById('filterModal');
modal.classList.add('hidden');
});
// 重置按钮
document.getElementById('resetBtn').addEventListener('click', function() {
document.getElementById('categorySelect').value = '';
document.getElementById('schoolInput').value = '';
document.getElementById('allRadio').checked = true;
});
// 应用筛选
document.getElementById('applyBtn').addEventListener('click', function() {
const category = document.getElementById('categorySelect').value;
const school = document.getElementById('schoolInput').value.trim().toLowerCase();
const type = document.querySelector('input[name="schoolType"]:checked').value;
const filteredData = mockData.filter(item => {
const matchCategory = category === '' || item.category === category;
const matchSchool = school === '' || item.school.toLowerCase().includes(school);
const matchType = type === '' || item.type === type;
return matchCategory && matchSchool && matchType;
});
renderTable(filteredData);
document.getElementById('filterModal').classList.add('hidden');
});
// 渲染表格函数
function renderTable(data) {
const tableBody = document.getElementById('dataTable');
tableBody.innerHTML = '';
if (data.length === 0) {
const row = document.createElement('tr');
row.innerHTML = `
<td colspan="4" class="px-6 py-4 text-center text-gray-500">
没有找到匹配的数据
</td>
`;
tableBody.appendChild(row);
return;
}
data.forEach(item => {
const row = document.createElement('tr');
row.className = 'table-row';
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.school}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.category}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.type}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.year}</td>
`;
tableBody.appendChild(row);
});
}
</script>
</body>
</html>
—— 评论区 ——