为什么你需要了解 jQuery Mobile 表格？
在移动互联网时代，用户越来越习惯通过手机、平板等设备访问网页。而网页内容中，表格是展示结构化数据最常见的方式之一。然而，传统的 HTML 表格在移动端体验差——文字太小、列宽不适应、横向滚动混乱，甚至无法有效交互。
这时候，jQuery Mobile 表格就显得尤为重要。它不是简单地把普通表格“变小”，而是从布局、交互、响应式设计等多个维度，为移动设备量身打造了表格解决方案。通过它，你可以在手机上轻松查看复杂的数据，比如订单列表、用户信息表、商品价格对比等，而无需缩放或左右滑动才能看清每一列。
想象一下：你正在开发一个电商 App 的“我的订单”页面，需要展示订单编号、商品名、金额、状态、下单时间。如果用原生 HTML 表格，用户在手机上可能要反复滑动才能看全一行信息。但用了 jQuery Mobile 表格，系统会自动将每一行拆分为可折叠的“卡片式”结构，点击展开查看详细信息，体验流畅又直观。
所以，掌握 jQuery Mobile 表格，不只是学会写代码，更是掌握一种“为移动而生”的数据呈现思维。
jQuery Mobile 表格的基本结构
要使用 jQuery Mobile 表格，第一步是确保你已经引入了 jQuery 和 jQuery Mobile 的核心文件。这就像盖房子前要先准备好地基和建材。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery Mobile 表格示例</title>
<!-- 引入 jQuery Mobile 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 引入 jQuery Mobile 脚本 -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 页面容器 -->
<div data-role="page" id="tablePage">
<div data-role="header">
<h1>订单列表</h1>
</div>
<div data-role="content">
<!-- 表格开始 -->
<table data-role="table" data-mode="columntoggle" class="ui-responsive">
<thead>
<tr>
<th>订单编号</th>
<th>商品名</th>
<th>金额</th>
<th>状态</th>
<th>下单时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>ORD20240401</td>
<td>无线蓝牙耳机</td>
<td>299.00</td>
<td>已发货</td>
<td>2024-04-01 10:30</td>
</tr>
<tr>
<td>ORD20240402</td>
<td>智能手环</td>
<td>199.00</td>
<td>待付款</td>
<td>2024-04-02 14:20</td>
</tr>
<tr>
<td>ORD20240403</td>
<td>充电宝 10000mAh</td>
<td>129.00</td>
<td>已完成</td>
<td>2024-04-03 09:15</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
这段代码中，关键点有几点：
data-role="table"：告诉 jQuery Mobile 这是一个“可交互的表格”，会自动应用样式和行为。data-mode="columntoggle"：这是核心设置，表示启用“列切换”模式。当屏幕太窄时，会把表格转为“可折叠”的卡片模式，用户可以点击“更多”来查看隐藏的列。class="ui-responsive"：确保表格在不同屏幕尺寸下自动响应，不会超出容器宽度。<thead>和<tbody>是标准的表格结构，分别表示表头和数据行。
这就像你买了一套可折叠家具——在大空间里是桌子，在小空间里可以变成床，灵活又实用。
使用数据模式：columntoggle 与 responsive
jQuery Mobile 表格支持两种主要的数据展示模式：columntoggle 和 responsive。它们的用途略有不同，但都为移动端优化。
columntoggle：智能列隐藏与展开
当你设置 data-mode="columntoggle" 时，系统会根据屏幕宽度自动判断是否需要隐藏某些列。隐藏的列会被放在一个“更多”按钮中，用户点击后可以展开查看。
举个例子：在手机上，你可能只看到“订单编号”和“状态”，其他信息被隐藏。点击“更多”按钮，就能看到“商品名”“金额”“下单时间”等完整信息。
这种设计非常适合信息量大但用户不需要一眼看全的场景。它避免了“横向滚动”带来的操作疲劳，也减少了视觉混乱。
responsive：自动调整布局
如果你设置 data-mode="responsive"，表格会自动将行拆分为“单行卡片”，每一行变成一个独立的“信息块”。这在小屏幕上非常友好。
例如：
<table data-role="table" data-mode="responsive" class="ui-responsive">
<thead>
<tr>
<th>订单编号</th>
<th>商品名</th>
<th>金额</th>
<th>状态</th>
<th>下单时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>ORD20240401</td>
<td>无线蓝牙耳机</td>
<td>299.00</td>
<td>已发货</td>
<td>2024-04-01 10:30</td>
</tr>
</tbody>
</table>
此时，每个 <tr> 会被渲染成一个可点击的卡片，点击后展开更多内容。非常适合在移动端作为“列表+详情”结构使用。
💡 小贴士：
columntoggle适合列数多但用户可接受“分步查看”的场景；responsive更适合“每一行都是独立信息单元”的情况，比如用户资料卡、商品卡片。
高级功能：可排序、可分页、自定义样式
虽然 jQuery Mobile 表格默认不支持排序或分页，但你可以通过添加 JavaScript 或 CSS 来扩展功能。
自定义样式：让表格更美观
jQuery Mobile 提供了丰富的 CSS 类，你可以轻松修改表格外观。
/* 自定义表头样式 */
.ui-table th {
background-color: #0074d9;
color: white;
font-weight: bold;
text-align: center;
}
/* 设置行间间隔 */
.ui-table tbody tr {
border-bottom: 1px solid #ccc;
}
/* 鼠标悬停效果（在支持的设备上） */
.ui-table tbody tr:hover {
background-color: #f0f8ff;
}
这些样式会自动应用到所有 data-role="table" 的表格上，让你的页面看起来更专业。
手动实现排序功能（JavaScript 示例）
虽然 jQuery Mobile 不自带排序，但你可以用原生 JS 实现。下面是一个简单的排序示例，点击表头可按列排序。
$(document).on("pageinit", "#tablePage", function() {
// 为表头添加点击事件
$("th").on("click", function() {
const table = $(this).closest("table");
const tbody = table.find("tbody");
const rows = tbody.find("tr").get(); // 获取所有行
const index = $(this).index(); // 获取当前列索引
// 按指定列排序
rows.sort(function(a, b) {
const aText = $(a).find("td").eq(index).text().trim();
const bText = $(b).find("td").eq(index).text().trim();
return aText.localeCompare(bText); // 字符串比较
});
// 重新插入排序后的行
$.each(rows, function(i, row) {
tbody.append(row);
});
});
});
这段代码的作用是：当用户点击表头时，自动将该列的数据按字母顺序重新排列。虽然不能在所有设备上完美运行（如某些旧手机不支持 localeCompare），但它为你的项目提供了基础的交互能力。
实际应用：构建用户信息管理界面
现在我们来做一个完整的案例：创建一个用户信息管理页面，展示用户姓名、邮箱、电话、部门、状态，使用 jQuery Mobile 表格实现响应式布局。
<div data-role="page" id="userPage">
<div data-role="header">
<h1>用户信息列表</h1>
</div>
<div data-role="content">
<table data-role="table" data-mode="columntoggle" class="ui-responsive">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>部门</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>138-0000-1234</td>
<td>技术部</td>
<td>在职</td>
</tr>
<tr>
<td>李四</td>
<td>lisi@example.com</td>
<td>139-0000-5678</td>
<td>市场部</td>
<td>休假中</td>
</tr>
<tr>
<td>王五</td>
<td>wangwu@example.com</td>
<td>137-0000-9999</td>
<td>人事部</td>
<td>离职</td>
</tr>
</tbody>
</table>
</div>
</div>
这个页面在大屏幕上会以标准表格形式显示，而在手机上会自动切换为“列隐藏 + 更多”模式。用户可以快速浏览关键信息（如姓名、状态），需要时再点击查看完整数据。
总结：jQuery Mobile 表格的价值与适用场景
jQuery Mobile 表格不是为了替代原生 HTML 表格，而是为移动设备提供更优的数据展示方案。它解决了传统表格在小屏设备上的三大痛点：可读性差、交互不便、布局混乱。
它特别适合以下场景：
- 移动端后台管理系统（如订单、用户、日志查看）
- 信息展示类 App（如新闻列表、商品比价）
- 需要兼容多种设备的 Web 应用
尽管 jQuery Mobile 本身已逐渐被现代框架（如 Vue、React）取代，但在一些轻量级项目、旧系统维护或快速原型开发中，它依然具有实用价值。掌握 jQuery Mobile 表格，能让你在有限资源下快速构建出可用、美观的移动端数据界面。
更重要的是，它教会我们一个核心理念：网页设计必须从用户设备出发。不是“我做了什么”，而是“用户能看得清、点得准、用得爽”。
当你下次需要展示数据时，不妨先问自己一句：这个表格在手机上真的好用吗？如果答案是否定的，那么 jQuery Mobile 表格，或许就是你迈出的第一步。