带行列标题的任务表

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>带筛选与数值排序的任务表｜9.1免费版代码</title>
<meta name="description" content="9.1免费版代码：用 caption、行列 scope 和按分钟数值排序展示原创学习任务表，脚本只增强静态六行数据，附 MIT 源文件。">
<meta name="keywords" content="9.1免费版代码，原创网页示例，HTML，CSS，JavaScript">
<link rel="canonical" href="https://91-web.cn/examples/data-table.html">
<meta name="theme-color" content="#faf7ef">
<style>*{box-sizing:border-box}html{scroll-padding-top:1.5rem}body{margin:0;background:#faf7ef;color:#142e4c;font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:#075e56;text-underline-offset:.2em}a:hover{color:#0d473f}button,input,select,textarea{font:inherit}button,.button{min-height:44px;border:1px solid #0a635b;border-radius:9px;background:#0a635b;color:#fff;padding:.65rem 1rem;cursor:pointer;font-weight:650;display:inline-block;text-decoration:none}button:hover,.button:hover{background:#084f48;color:#fff}button:disabled{cursor:not-allowed;opacity:.6}.secondary{background:#fff;color:#075e56}.secondary:hover{background:#e5f4ec;color:#075e56}input,select,textarea{width:100%;min-height:44px;padding:.65rem;border:1px solid #869993;border-radius:8px;background:#fff;color:#142e4c}input[type=checkbox]{width:auto;min-height:0;accent-color:#0a635b}label{display:block;font-weight:650;margin-bottom:.3rem}fieldset{border:1px solid #c3d4cd;border-radius:12px;padding:1rem;margin:1rem 0}legend{padding:0 .4rem;font-weight:700}h1{font-size:clamp(1.7rem,4.5vw,2.7rem);line-height:1.2;max-width:24ch}h2{font-size:1.5rem;line-height:1.35;margin-top:0}h3{font-size:1.1rem}p{margin:.7rem 0}header,main,footer{width:min(100% - 2rem,920px);margin-inline:auto}header{padding:2rem 0 1.2rem;border-bottom:1px solid #c3d4cd}.eyebrow{color:#37625b;font-size:.85rem;letter-spacing:.06em;font-weight:750}.lead{font-size:1.1rem;max-width:65ch}.notice{border-left:4px solid #d69b3b;padding:.75rem 1rem;background:#fff7df;font-size:.94rem}main{padding:1.5rem 0 3rem}section{margin:0 0 1.4rem;padding:1.3rem;border:1px solid #d2ddd3;background:#fff;border-radius:14px;box-shadow:0 5px 15px #142e4c06}.demo{background:#ecf6ee;border-color:#a6c5b9}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}.field{margin-bottom:1rem}.help{font-size:.9rem;color:#47635c}.error{color:#a32118;font-weight:650}input[aria-invalid=true],select[aria-invalid=true]{border:2px solid #a32118}.summary{padding:1rem;border:2px solid #a32118;border-radius:8px;background:#fff5f3}.result{padding:1rem;border:1px solid #9cbeaf;border-radius:9px;background:#fff;margin-top:1rem}.status{min-height:1.8em;color:#27554b;margin:.8rem 0}.badge{font-size:.85rem;padding:.18rem .55rem;border-radius:99px;background:#dcefe6;color:#164e43}.scroll{overflow-x:auto;border:1px solid #b9cdc2;border-radius:9px}table{width:100%;border-collapse:collapse;min-width:540px;background:#fff}caption{text-align:left;font-weight:700;padding:1rem;background:#e5f1e9}th,td{padding:.8rem;border-bottom:1px solid #ceddd3;text-align:left}thead th{background:#f1f6f0}tbody th{font-weight:650}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem;background:#142e4c;color:#eaf6ed;border-radius:9px;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.93em}.downloads{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}footer{border-top:1px solid #c3d4cd;padding:1.5rem 0 2rem;font-size:.9rem}.skip{position:absolute;left:1rem;top:-6rem;background:#142e4c;color:#fff;padding:.7rem;z-index:20}.skip:focus{top:.6rem}:focus-visible{outline:3px solid #b66a00;outline-offset:4px}[hidden]{display:none!important}.task-list{list-style:none;padding:0}.task-list li{padding:.8rem;border-bottom:1px solid #ceddd3;display:flex;align-items:center;gap:.8rem}.task-list label{font-weight:500;margin:0;display:flex;gap:.7rem;align-items:center;flex:1}.task-list .done .task-name{text-decoration:line-through;color:#557067}.task-list button{font-size:.9rem}.outline-mode nav,.outline-mode main,.outline-mode header,.outline-mode footer{outline:2px dashed #b66a00;outline-offset:3px}@media(max-width:640px){.grid{grid-template-columns:1fr}section{padding:1rem}header,main,footer{width:min(100% - 1.2rem,920px)}.downloads .button{width:100%;text-align:center}.task-list li{align-items:flex-start;flex-wrap:wrap}.task-list label{min-width:100%}}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}</style>
</head>
<body>
<a class="skip" href="#main">跳到主要内容</a>
<header>
<p class="eyebrow">91-WEB · 原创学习示例</p>
<p><a href="https://91-web.cn/">本站学习首页</a> · <a href="#learn">代码讲解</a> · <a href="#download">源文件与许可</a></p>
<h1>带筛选与数值排序的任务表</h1>
<p class="lead">学习任务表保留清晰的行列关系。先让静态表格能读懂，再增加筛选和按分钟排序，不把表格数据藏在脚本里。</p>
<p class="notice">围绕检索词“9.1免费版代码”提供原创练习。“9.1”在本站仅是未确认的检索或版本线索；本示例由 91-web.cn 为网页制作学习编写，不是任何 9.1 产品的官方代码，也不提供未经核验的产品安装包。</p>
</header>
<main id="main" tabindex="-1">
<section class="demo" aria-labelledby="demo-heading">
<h2 id="demo-heading">动手示例</h2>
<fieldset id="table-controls" disabled><legend>查看任务</legend><div class="grid"><div><label for="category">按主题筛选</label><select id="category"><option value="all">全部主题</option><option value="HTML">HTML</option><option value="CSS">CSS</option><option value="JavaScript">JavaScript</option></select></div><div><p class="help">按预计分钟数排序；当前是从少到多。</p><button id="sort-minutes" type="button">改为从多到少</button></div></div></fieldset>
<p id="table-status" class="status" role="status" aria-live="polite" aria-atomic="true">全部 6 项任务，按预计分钟数从少到多排列。</p>
<div class="scroll" role="region" aria-label="学习任务表，可横向滚动" tabindex="0"><table><caption>原创网页练习清单（预计时长为示例数据）</caption><thead><tr><th scope="col">任务</th><th scope="col">主题</th><th id="minutes-heading" scope="col" aria-sort="ascending">预计分钟</th><th scope="col">练习目标</th></tr></thead><tbody id="task-rows">
<tr data-category="HTML" data-minutes="10"><th scope="row">添加正文跳转</th><td>HTML</td><td>10</td><td>普通链接指向唯一 id</td></tr>
<tr data-category="HTML" data-minutes="15"><th scope="row">标注表格标题</th><td>HTML</td><td>15</td><td>caption 与 scope 配对</td></tr>
<tr data-category="CSS" data-minutes="20"><th scope="row">调整手机卡片</th><td>CSS</td><td>20</td><td>窄屏改为单栏</td></tr>
<tr data-category="CSS" data-minutes="25"><th scope="row">补充焦点样式</th><td>CSS</td><td>25</td><td>键盘焦点清晰可见</td></tr>
<tr data-category="JavaScript" data-minutes="30"><th scope="row">实现本地状态</th><td>JavaScript</td><td>30</td><td>文字状态与数据同步</td></tr>
<tr data-category="JavaScript" data-minutes="45"><th scope="row">校验配置导出</th><td>JavaScript</td><td>45</td><td>检验后输出 JSON</td></tr>
</tbody></table></div>
</section>
<section id="learn" aria-labelledby="learn-heading">
<h2 id="learn-heading">这段代码解决什么问题</h2>
<p><code>caption</code> 说明表格整体用途。顶行的 <code>th scope="col"</code> 是列标题，每行首格的 <code>th scope="row"</code> 是任务名称，帮助读者理解数据归属。</p><p>预计时长是本站构造的学习安排，不是实际测量结果。排序使用数值比较函数，避免默认字符串排序导致 100 排在 20 前面。筛选仅改变这些已存在行的 <code>hidden</code>，不请求远程数据。</p><ul><li>表格在窄屏可横向滚动，保留行列关系。</li><li>分钟列的 aria-sort 跟随排序方向更新，文字状态也同步说明当前顺序。</li><li>数据量大时应考虑分页与服务端查询，此例只演示六行内存操作。</li><li>排序按钮与表头分开，保持按钮名称直接表达下一次操作。</li></ul>
<h3>关键片段</h3>
<pre><code>&lt;caption&gt;原创网页练习清单&lt;/caption&gt;
&lt;th scope=&quot;col&quot; aria-sort=&quot;ascending&quot;&gt;预计分钟&lt;/th&gt;
&lt;th scope=&quot;row&quot;&gt;添加正文跳转&lt;/th&gt;
// 默认 sort 是字符串顺序；此处明确比较数值
rows.sort((a, b) =&gt; Number(a.dataset.minutes) - Number(b.dataset.minutes));</code></pre>
<p class="help">这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。</p>
</section>
<section id="download" aria-labelledby="download-heading">
<h2 id="download-heading">运行条件与源文件</h2>
<p>解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 <code>data-table.html</code>。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。</p>
<p>关闭 JavaScript 仍可阅读本文和初始示例内容；动态操作按钮保留禁用状态或静态内容，不表示已运行交互。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。</p>
<div class="downloads"><a class="button" href="../downloads/data-table.zip" download>下载本例 ZIP</a><a class="button secondary" href="../downloads/data-table-source.txt" download>完整源文件 TXT</a><a class="button secondary" href="../downloads/webpage-practice-pack.zip" download>下载五例合集</a></div>
<p>本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。<a href="../downloads/LICENSE.txt">查看完整 MIT 许可</a> · <a href="../downloads/data-table-README.txt">运行说明</a></p>
</section>
<section aria-labelledby="sources-heading"><h2 id="sources-heading">进一步阅读</h2><p>以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。</p><ul><li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">W3C WAI：行列两类表头</a>（在线参考，访问需网络）</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">MDN：Array.prototype.sort</a>（在线参考，访问需网络）</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-sort">MDN：aria-sort</a>（在线参考，访问需网络）</li></ul></section>
</main>
<footer><p>91-web.cn 原创网页练习 · 精确检索词：9.1免费版代码</p><p>页面示例只处理当前内存中的学习数据。源文件的 MIT 许可只覆盖本站原创示例代码，不替代链接资料各自的许可。</p></footer>
<script>
// Copyright (c) 2026 91-web.cn contributors — MIT License.
'use strict';
const controls = document.getElementById('table-controls');
const category = document.getElementById('category');
const sortButton = document.getElementById('sort-minutes');
const heading = document.getElementById('minutes-heading');
const tbody = document.getElementById('task-rows');
const rows = Array.from(tbody.querySelectorAll('tr'));
const tableStatus = document.getElementById('table-status');
let ascending = true;
controls.disabled = false;
function updateTable() {
  rows.sort((a, b) => (Number(a.dataset.minutes) - Number(b.dataset.minutes)) * (ascending ? 1 : -1));
  let count = 0;
  for (const row of rows) {
    row.hidden = category.value !== 'all' && row.dataset.category !== category.value;
    if (!row.hidden) count += 1;
    tbody.append(row);
  }
  heading.setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
  sortButton.textContent = ascending ? '改为从多到少' : '改为从少到多';
  tableStatus.textContent = (category.value === 'all' ? '全部主题' : category.value) + '，显示 ' + count + ' 项任务，按预计分钟数' + (ascending ? '从少到多' : '从多到少') + '排列。';
}
category.addEventListener('change', updateTable);
sortButton.addEventListener('click', () => { ascending = !ascending; updateTable(); });
</script>
</body>
</html>