<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Table</title>
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 jQuery Mobile 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 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">
<div data-role="header">
<h1>Table Example</h1>
</div>
<div data-role="content">
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Name</th>
<th data-priority="2">Age</th>
<th data-priority="3">Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Engineer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Designer</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Manager</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
在这个例子中，我们使用了 data-role="table" 属性定义了一个 jQuery Mobile 表格。data-mode="columntoggle" 属性使表格变成响应式的，允许用户在小屏幕设备上切换显示哪些列。
每个表头单元格使用 data-priority 属性指定了列的优先级，数字越小，表示优先级越高。这有助于在小屏幕上自动调整列的显示顺序。
表格的主要样式通过 class="ui-responsive table-stroke" 设置。ui-responsive 类使表格响应式，而 table-stroke 类添加了边框。
你可以根据需要调整表格的内容和样式，以适应你的应用。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/table/)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/9424/jQuery Mobile