菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 表格

likuolei

jQuery Mobile 表格（Tables）详解

表格（Table） 是 jQuery Mobile 中用于 展示结构化数据 的组件，自动响应式，支持 列切换（Column Toggle）、可重排（Reflow）、主题，在移动端非常实用。

推荐用于 数据列表、订单、统计 等场景。

1. 基本表格

<table data-role="table" class="ui-responsive">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>国家</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>中国</td>
    </tr>
    <tr>
      <td>John</td>
      <td>35</td>
      <td>比利时</td>
    </tr>
  </tbody>
</table>

必须加：

  • data-role="table"
  • class="ui-responsive"（响应式）

2. 两种响应式模式

模式类名效果
Reflow（重排）ui-responsive小屏时堆叠成卡片（推荐）
Column Toggle（列切换）ui-responsive table-stroke + data-column-btn-text小屏时隐藏列 + 按钮切换

3. Reflow 模式（推荐）

<table data-role="table" class="ui-responsive" data-mode="reflow">
  <thead>
    <tr>
      <th>项目</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5</td>
      <td>€2.50</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>10</td>
      <td>€1.80</td>
    </tr>
  </tbody>
</table>

小屏幕自动变为：

项目：苹果
数量：5
价格：€2.50

4. Column Toggle 模式（列切换）

<table data-role="table" id="myTable" class="ui-responsive table-stroke"
       data-mode="columntoggle" data-column-btn-text="选择列">
  <thead>
    <tr>
      <th>姓名</th>
      <th data-colstart="2">年龄</th>
      <th data-colstart="3">国家</th>
      <th data-colstart="4">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>比利时</td>
      <td>alice@be.com</td>
    </tr>
  </tbody>
</table>

小屏时出现 “选择列”按钮，可勾选显示/隐藏列

5. 完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 表格演示</title>
  <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.1.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">
  <div data-role="header" data-position="fixed">
    <h1>表格示例</h1>
  </div>

  <div data-role="main" class="ui-content">

    <h3>1. Reflow 模式（推荐）</h3>
    <table data-role="table" class="ui-responsive" data-mode="reflow">
      <thead>
        <tr>
          <th>产品</th>
          <th>数量</th>
          <th>单价</th>
          <th>总计</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>iPhone 16</td>
          <td>1</td>
          <td>€999</td>
          <td>€999</td>
        </tr>
        <tr>
          <td>AirPods</td>
          <td>2</td>
          <td>€179</td>
          <td>€358</td>
        </tr>
      </tbody>
    </table>

    <h3>2. Column Toggle 模式</h3>
    <table data-role="table" id="userTable" class="ui-responsive table-stroke"
           data-mode="columntoggle" data-column-btn-text="显示列" data-column-popup-theme="a">
      <thead>
        <tr>
          <th>姓名</th>
          <th data-colstart="2">年龄</th>
          <th data-colstart="3">国家</th>
          <th data-colstart="4">邮箱</th>
          <th data-colstart="5">注册时间</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>比利时用户</td>
          <td>28</td>
          <td>比利时</td>
          <td>user@be.com</td>
          <td>2025-11-17 03:02</td>
        </tr>
        <tr>
          <td>张伟</td>
          <td>35</td>
          <td>中国</td>
          <td>zhang@cn.com</td>
          <td>2025-11-16</td>
        </tr>
      </tbody>
    </table>

    <h3>3. 带主题 + 边框</h3>
    <table data-role="table" class="ui-responsive" data-mode="reflow" data-theme="a">
      <thead>
        <tr>
          <th data-priority="2">城市</th>
          <th>人口</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>布鲁塞尔</td>
          <td>120万</td>
        </tr>
      </tbody>
    </table>

  </div>

  <div data-role="footer" data-position="fixed">
    <h4>比利时 © 2025</h4>
  </div>
</div>

</body>
</html>

6. 表格属性汇总

属性值说明
data-role="table"—必须
class="ui-responsive"—响应式
data-mode="reflow"reflow / columntoggle模式
data-column-btn-text文字列切换按钮文字
data-column-popup-themea / b列选择弹窗主题
data-priority="1"数字列优先级（越小越重要）
data-colstart="2"数字列起始编号（用于排序）

7. JavaScript 控制

<script>
$(document).on("pagecreate", function() {
  // 刷新表格（数据动态加载后）
  $("#myTable").table("refresh");

  // 销毁表格（移除增强）
  $("#myTable").table("destroy");
});
</script>

8. 最佳实践

建议说明
优先使用 reflow 模式移动端更友好
列数 ≤ 4太多用 columntoggle
重要列加 data-priority="1"小屏优先显示
避免放图片影响性能
内容加 padding提升可读性

9. 常见问题

问题解决方案
表格不响应忘记加 ui-responsive
列切换按钮不显示必须 data-mode="columntoggle"
小屏乱排检查 data-priority
数据不更新调用 .table("refresh")

10. 推荐模板

<!-- Reflow 模式（推荐） -->
<table data-role="table" class="ui-responsive" data-mode="reflow">
  <thead>
    <tr>
      <th data-priority="2">名称</th>
      <th>值</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>当前时间</td>
      <td>2025年11月17日 03:02（CET）</td>
    </tr>
  </tbody>
</table>

<!-- Column Toggle 模式 -->
<table data-role="table" class="ui-responsive table-stroke" data-mode="columntoggle">
  <thead>
    <tr>
      <th>列1</th>
      <th data-priority="1">重要列</th>
    </tr>
  </thead>
</table>

总结：选择指南

场景推荐模式
少量数据（≤3列）reflow
多列数据（>3列）columntoggle
统计面板reflow + data-theme
后台管理columntoggle + data-priority

需要我为你生成：

  • 动态加载数据的 AJAX 表格？
  • 可排序 + 筛选表格？
  • 导出为 CSV 功能？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部