网硕互联帮助中心1. 引言
在移动端开发中，表格数据的展示一直是一个挑战。屏幕尺寸有限，传统的 HTML 表格在手机上往往显示不全，用户体验较差。jQuery Mobile 提供了一套响应式的表格解决方案，能够自动适配不同屏幕尺寸，让表格在移动设备上也能清晰易读。本文将详细介绍 jQuery Mobile 表格的使用方法，并通过丰富的代码实例帮助读者快速掌握。
2. 基础表格
jQuery Mobile 中的基础表格使用标准的 HTML 表格结构，只需添加 data-role="table" 属性即可。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<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="table-demo">
<div data-role="header">
<h1>基础表格示例</h1>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" id="basic-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>上海</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>广州</td>
<td>产品经理</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
在这个示例中，我们引入了 jQuery Mobile 的 CSS 和 JS 文件，并创建了一个包含表格的页面。表格会自动应用 jQuery Mobile 的样式，在移动设备上获得更好的视觉效果。
3. 响应式表格模式
jQuery Mobile 提供了两种响应式表格模式：列切换模式（column toggle）和重排模式（reflow）。
3.1 列切换模式
列切换模式允许用户通过按钮选择显示或隐藏某些列，适合列数较多的表格。使用 data-mode="columntoggle" 启用该模式：
<table data-role="table" data-mode="columntoggle" id="columntoggle-table">
<thead>
<tr>
<th data-priority="1">产品名称</th>
<th data-priority="persist">价格</th>
<th data-priority="2">库存</th>
<th data-priority="3">销量</th>
<th data-priority="4">评分</th>
</tr>
</thead>
<tbody>
<tr>
<td>智能手表</td>
<td>¥1299</td>
<td>256</td>
<td>1,280</td>
<td>4.5</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>¥399</td>
<td>512</td>
<td>3,560</td>
<td>4.8</td>
</tr>
<tr>
<td>平板电脑</td>
<td>¥2999</td>
<td>128</td>
<td>890</td>
<td>4.6</td>
</tr>
</tbody>
</table>
关键点说明：
- data-priority 属性控制列的优先级，数字越小优先级越高。
- data-priority="persist" 表示该列始终显示，不可隐藏。
- 用户可以通过表格右上角的按钮选择要显示的列。
3.2 重排模式
重排模式在屏幕宽度不足时，将每一行数据转换为标签-值对的形式显示，适合列数较少的表格。使用 data-mode="reflow" 启用：
<table data-role="table" data-mode="reflow" id="reflow-table">
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>出版年份</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaScript 高级程序设计</td>
<td>Nicholas C. Zakas</td>
<td>人民邮电出版社</td>
<td>2020</td>
</tr>
<tr>
<td>CSS 权威指南</td>
<td>Eric A. Meyer</td>
<td>中国电力出版社</td>
<td>2019</td>
</tr>
<tr>
<td>深入理解计算机系统</td>
<td>Randal E. Bryant</td>
<td>机械工业出版社</td>
<td>2018</td>
</tr>
</tbody>
</table>
在重排模式下，当屏幕宽度小于 500px 时，表格会自动将每行数据转换为类似表单的布局，每一列的标题会作为标签显示在数据前面。
4. 表格样式与主题
jQuery Mobile 提供了丰富的主题样式，可以通过 data-theme 属性为表格设置不同的配色方案：
<table data-role="table" data-mode="reflow" data-theme="b" id="styled-table">
<thead>
<tr>
<th>课程名称</th>
<th>学分</th>
<th>授课教师</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据结构与算法</td>
<td>4</td>
<td>陈教授</td>
<td>92</td>
</tr>
<tr>
<td>操作系统</td>
<td>3</td>
<td>李教授</td>
<td>88</td>
</tr>
<tr>
<td>计算机网络</td>
<td>3</td>
<td>王教授</td>
<td>95</td>
</tr>
</tbody>
</table>
jQuery Mobile 内置了多个主题（a、b、c、d、e），其中：
- 主题 a：黑色系，适合深色背景。
- 主题 b：蓝色系，适合强调信息。
- 主题 c：灰色系，默认主题。
- 主题 d：浅色系，适合内容区域。
- 主题 e：黄色系，适合警告或突出显示。
5. 表格交互增强
除了基本的显示功能，我们还可以通过 jQuery 为表格添加交互功能，例如行点击事件、排序等。
5.1 行点击事件
<script>
$(document).on("pagecreate", "#table-demo", function() {
$("#interactive-table tbody tr").on("click", function() {
var name = $(this).find("td:first").text();
var score = $(this).find("td:last").text();
alert("学生：" + name + "，成绩：" + score);
});
});
</script>
<table data-role="table" data-mode="reflow" id="interactive-table">
<thead>
<tr>
<th>学生姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>85</td>
<td>92</td>
<td>78</td>
<td>255</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>88</td>
<td>95</td>
<td>273</td>
</tr>
<tr>
<td>小刚</td>
<td>76</td>
<td>85</td>
<td>82</td>
<td>243</td>
</tr>
</tbody>
</table>
5.2 表格排序
结合第三方库如 Tablesorter，可以为 jQuery Mobile 表格添加排序功能：
<!– 引入 Tablesorter 插件 –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script>
$(document).on("pagecreate", "#sort-table", function() {
$("#sortable-table").tablesorter({
headers: {
0: { sorter: "text" },
1: { sorter: "digit" },
2: { sorter: "digit" },
3: { sorter: "digit" }
}
});
});
</script>
<table data-role="table" data-mode="reflow" id="sortable-table" class="tablesorter">
<thead>
<tr>
<th>城市</th>
<th>人口（万）</th>
<th>面积（km²）</th>
<th>GDP（亿元）</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>2154</td>
<td>16410</td>
<td>36102</td>
</tr>
<tr>
<td>上海</td>
<td>2428</td>
<td>6340</td>
<td>38155</td>
</tr>
<tr>
<td>广州</td>
<td>1530</td>
<td>7434</td>
<td>25019</td>
</tr>
<tr>
<td>深圳</td>
<td>1756</td>
<td>1997</td>
<td>27670</td>
</tr>
</tbody>
</table>
6. 完整实战案例
下面是一个综合性的实战案例，结合了列切换模式、主题样式和交互功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.highlight-row { background-color: #e8f5e9 !important; }
.low-stock { color: #d32f2f; font-weight: bold; }
</style>
</head>
<body>
<div data-role="page" id="inventory-page">
<div data-role="header" data-theme="b">
<h1>库存管理系统</h1>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" data-mode="columntoggle" data-theme="b" id="inventory-table">
<thead>
<tr>
<th data-priority="persist">商品名称</th>
<th data-priority="1">分类</th>
<th data-priority="persist">库存量</th>
<th data-priority="2">单价</th>
<th data-priority="3">供应商</th>
<th data-priority="4">入库日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>机械键盘</td>
<td>外设</td>
<td class="low-stock">15</td>
<td>¥399</td>
<td>A 科技</td>
<td>2024-01-15</td>
</tr>
<tr>
<td>无线鼠标</td>
<td>外设</td>
<td>128</td>
<td>¥89</td>
<td>B 数码</td>
<td>2024-02-20</td>
</tr>
<tr>
<td>显示器 27寸</td>
<td>显示设备</td>
<td class="low-stock">8</td>
<td>¥1899</td>
<td>C 显示</td>
<td>2024-01-10</td>
</tr>
<tr>
<td>USB-C 扩展坞</td>
<td>配件</td>
<td>56</td>
<td>¥159</td>
<td>D 配件</td>
<td>2024-03-05</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer" data-theme="b">
<h4>库存数据实时更新</h4>
</div>
</div>
<script>
$(document).on("pagecreate", "#inventory-page", function() {
// 高亮库存低于 20 的行
$("#inventory-table tbody tr").each(function() {
var stock = parseInt($(this).find("td:eq(2)").text());
if (stock < 20) {
$(this).addClass("highlight-row");
}
});
// 点击行显示详细信息
$("#inventory-table tbody tr").on("click", function() {
var name = $(this).find("td:first").text();
var stock = $(this).find("td:eq(2)").text();
alert("商品：" + name + "\\n当前库存：" + stock);
});
});
</script>
</body>
</html>
7. 常见问题与注意事项
在使用 jQuery Mobile 表格时，需要注意以下几点：
- 表格结构必须完整：必须包含 <thead> 和 <tbody>，否则响应式模式无法正常工作。
- 列切换模式的优先级设置：建议至少保留一列设置为 data-priority="persist"，确保关键信息始终可见。
- 重排模式的限制：重排模式适合列数较少（建议不超过 5 列）的表格，列数过多时推荐使用列切换模式。
- 性能考虑：如果表格数据量较大（超过 100 行），建议结合分页或虚拟滚动技术，避免页面卡顿。
- 自定义样式：可以通过 CSS 覆盖 jQuery Mobile 的默认样式，但要注意选择器的优先级。
8. 总结
jQuery Mobile 提供了强大且易用的表格解决方案，通过 data-role="table" 配合 data-mode 属性，开发者可以轻松创建适配移动设备的响应式表格。列切换模式适合列数较多的复杂表格，重排模式则适合列数较少的简单表格。结合 jQuery 的事件处理和第三方插件，还可以为表格添加丰富的交互功能。希望本文的代码实例能帮助读者在实际项目中灵活运用 jQuery Mobile 表格。
评论前必须登录！
注册