\u5728\u79fb\u52a8\u7aef\u5f00\u53d1\u4e2d，\u8868\u683c\u6570\u636e\u7684\u5c55\u793a\u4e00\u76f4\u662f\u4e00\u4e2a\u6311\u6218\u3002\u5c4f\u5e55\u5c3a\u5bf8\u6709\u9650，\u4f20\u7edf\u7684 HTML \u8868\u683c\u5728\u624b\u673a\u4e0a\u5f80\u5f80\u663e\u793a\u4e0d\u5168，\u7528\u6237\u4f53\u9a8c\u8f83\u5dee\u3002jQuery Mobile \u63d0\u4f9b\u4e86\u4e00\u5957\u54cd\u5e94\u5f0f\u7684\u8868\u683c\u89e3\u51b3\u65b9\u6848，\u80fd\u591f\u81ea\u52a8\u9002\u914d\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8，\u8ba9\u8868\u683c\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u4e5f\u80fd\u6e05\u6670\u6613\u8bfb\u3002\u672c\u6587\u5c06\u8be6\u7ec6\u4ecb\u7ecd jQuery Mobile \u8868\u683c\u7684\u4f7f\u7528\u65b9\u6cd5，\u5e76\u901a\u8fc7\u4e30\u5bcc\u7684\u4ee3\u7801\u5b9e\u4f8b\u5e2e\u52a9\u8bfb\u8005\u5feb\u901f\u638c\u63e1\u3002<\/p>\n
jQuery Mobile \u4e2d\u7684\u57fa\u7840\u8868\u683c\u4f7f\u7528\u6807\u51c6\u7684 HTML \u8868\u683c\u7ed3\u6784，\u53ea\u9700\u6dfb\u52a0 data-role="table" \u5c5e\u6027\u5373\u53ef\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b：<\/p>\n
<!DOCTYPE html>
\n<html>
\n<head>
\n <meta charset="utf-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1">
\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.css">
\n <script src="https:\/\/code.jquery.com\/jquery-1.11.3.min.js"><\/script>
\n <script src="https:\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.js"><\/script>
\n<\/head>
\n<body>
\n <div data-role="page" id="table-demo">
\n <div data-role="header">
\n <h1>\u57fa\u7840\u8868\u683c\u793a\u4f8b<\/h1>
\n <\/div>
\n <div data-role="main" class="ui-content">
\n <table data-role="table" id="basic-table">
\n <thead>
\n <tr>
\n <th>\u59d3\u540d<\/th>
\n <th>\u5e74\u9f84<\/th>
\n <th>\u57ce\u5e02<\/th>
\n <th>\u804c\u4e1a<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>\u5f20\u4e09<\/td>
\n <td>28<\/td>
\n <td>\u5317\u4eac<\/td>
\n <td>\u5de5\u7a0b\u5e08<\/td>
\n <\/tr>
\n <tr>
\n <td>\u674e\u56db<\/td>
\n <td>32<\/td>
\n <td>\u4e0a\u6d77<\/td>
\n <td>\u8bbe\u8ba1\u5e08<\/td>
\n <\/tr>
\n <tr>
\n <td>\u738b\u4e94<\/td>
\n <td>25<\/td>
\n <td>\u5e7f\u5dde<\/td>
\n <td>\u4ea7\u54c1\u7ecf\u7406<\/td>
\n <\/tr>
\n <\/tbody>
\n <\/table>
\n <\/div>
\n <\/div>
\n<\/body>
\n<\/html><\/p>\n
\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d，\u6211\u4eec\u5f15\u5165\u4e86 jQuery Mobile \u7684 CSS \u548c JS \u6587\u4ef6，\u5e76\u521b\u5efa\u4e86\u4e00\u4e2a\u5305\u542b\u8868\u683c\u7684\u9875\u9762\u3002\u8868\u683c\u4f1a\u81ea\u52a8\u5e94\u7528 jQuery Mobile \u7684\u6837\u5f0f，\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u83b7\u5f97\u66f4\u597d\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n
jQuery Mobile \u63d0\u4f9b\u4e86\u4e24\u79cd\u54cd\u5e94\u5f0f\u8868\u683c\u6a21\u5f0f：\u5217\u5207\u6362\u6a21\u5f0f（column toggle）\u548c\u91cd\u6392\u6a21\u5f0f（reflow）\u3002<\/p>\n
\u5217\u5207\u6362\u6a21\u5f0f\u5141\u8bb8\u7528\u6237\u901a\u8fc7\u6309\u94ae\u9009\u62e9\u663e\u793a\u6216\u9690\u85cf\u67d0\u4e9b\u5217，\u9002\u5408\u5217\u6570\u8f83\u591a\u7684\u8868\u683c\u3002\u4f7f\u7528 data-mode="columntoggle" \u542f\u7528\u8be5\u6a21\u5f0f：<\/p>\n
<table data-role="table" data-mode="columntoggle" id="columntoggle-table">
\n <thead>
\n <tr>
\n <th data-priority="1">\u4ea7\u54c1\u540d\u79f0<\/th>
\n <th data-priority="persist">\u4ef7\u683c<\/th>
\n <th data-priority="2">\u5e93\u5b58<\/th>
\n <th data-priority="3">\u9500\u91cf<\/th>
\n <th data-priority="4">\u8bc4\u5206<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>\u667a\u80fd\u624b\u8868<\/td>
\n <td>\u00a51299<\/td>
\n <td>256<\/td>
\n <td>1,280<\/td>
\n <td>4.5<\/td>
\n <\/tr>
\n <tr>
\n <td>\u84dd\u7259\u8033\u673a<\/td>
\n <td>\u00a5399<\/td>
\n <td>512<\/td>
\n <td>3,560<\/td>
\n <td>4.8<\/td>
\n <\/tr>
\n <tr>
\n <td>\u5e73\u677f\u7535\u8111<\/td>
\n <td>\u00a52999<\/td>
\n <td>128<\/td>
\n <td>890<\/td>
\n <td>4.6<\/td>
\n <\/tr>
\n <\/tbody>
\n<\/table><\/p>\n
\u5173\u952e\u70b9\u8bf4\u660e：<\/p>\n
\u91cd\u6392\u6a21\u5f0f\u5728\u5c4f\u5e55\u5bbd\u5ea6\u4e0d\u8db3\u65f6，\u5c06\u6bcf\u4e00\u884c\u6570\u636e\u8f6c\u6362\u4e3a\u6807\u7b7e-\u503c\u5bf9\u7684\u5f62\u5f0f\u663e\u793a，\u9002\u5408\u5217\u6570\u8f83\u5c11\u7684\u8868\u683c\u3002\u4f7f\u7528 data-mode="reflow" \u542f\u7528：<\/p>\n
<table data-role="table" data-mode="reflow" id="reflow-table">
\n <thead>
\n <tr>
\n <th>\u4e66\u540d<\/th>
\n <th>\u4f5c\u8005<\/th>
\n <th>\u51fa\u7248\u793e<\/th>
\n <th>\u51fa\u7248\u5e74\u4efd<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>JavaScript \u9ad8\u7ea7\u7a0b\u5e8f\u8bbe\u8ba1<\/td>
\n <td>Nicholas C. Zakas<\/td>
\n <td>\u4eba\u6c11\u90ae\u7535\u51fa\u7248\u793e<\/td>
\n <td>2020<\/td>
\n <\/tr>
\n <tr>
\n <td>CSS \u6743\u5a01\u6307\u5357<\/td>
\n <td>Eric A. Meyer<\/td>
\n <td>\u4e2d\u56fd\u7535\u529b\u51fa\u7248\u793e<\/td>
\n <td>2019<\/td>
\n <\/tr>
\n <tr>
\n <td>\u6df1\u5165\u7406\u89e3\u8ba1\u7b97\u673a\u7cfb\u7edf<\/td>
\n <td>Randal E. Bryant<\/td>
\n <td>\u673a\u68b0\u5de5\u4e1a\u51fa\u7248\u793e<\/td>
\n <td>2018<\/td>
\n <\/tr>
\n <\/tbody>
\n<\/table><\/p>\n
\u5728\u91cd\u6392\u6a21\u5f0f\u4e0b，\u5f53\u5c4f\u5e55\u5bbd\u5ea6\u5c0f\u4e8e 500px \u65f6，\u8868\u683c\u4f1a\u81ea\u52a8\u5c06\u6bcf\u884c\u6570\u636e\u8f6c\u6362\u4e3a\u7c7b\u4f3c\u8868\u5355\u7684\u5e03\u5c40，\u6bcf\u4e00\u5217\u7684\u6807\u9898\u4f1a\u4f5c\u4e3a\u6807\u7b7e\u663e\u793a\u5728\u6570\u636e\u524d\u9762\u3002<\/p>\n
jQuery Mobile \u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u4e3b\u9898\u6837\u5f0f，\u53ef\u4ee5\u901a\u8fc7 data-theme \u5c5e\u6027\u4e3a\u8868\u683c\u8bbe\u7f6e\u4e0d\u540c\u7684\u914d\u8272\u65b9\u6848：<\/p>\n
<table data-role="table" data-mode="reflow" data-theme="b" id="styled-table">
\n <thead>
\n <tr>
\n <th>\u8bfe\u7a0b\u540d\u79f0<\/th>
\n <th>\u5b66\u5206<\/th>
\n <th>\u6388\u8bfe\u6559\u5e08<\/th>
\n <th>\u6210\u7ee9<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>\u6570\u636e\u7ed3\u6784\u4e0e\u7b97\u6cd5<\/td>
\n <td>4<\/td>
\n <td>\u9648\u6559\u6388<\/td>
\n <td>92<\/td>
\n <\/tr>
\n <tr>
\n <td>\u64cd\u4f5c\u7cfb\u7edf<\/td>
\n <td>3<\/td>
\n <td>\u674e\u6559\u6388<\/td>
\n <td>88<\/td>
\n <\/tr>
\n <tr>
\n <td>\u8ba1\u7b97\u673a\u7f51\u7edc<\/td>
\n <td>3<\/td>
\n <td>\u738b\u6559\u6388<\/td>
\n <td>95<\/td>
\n <\/tr>
\n <\/tbody>
\n<\/table><\/p>\n
jQuery Mobile \u5185\u7f6e\u4e86\u591a\u4e2a\u4e3b\u9898（a\u3001b\u3001c\u3001d\u3001e），\u5176\u4e2d：<\/p>\n
\u9664\u4e86\u57fa\u672c\u7684\u663e\u793a\u529f\u80fd，\u6211\u4eec\u8fd8\u53ef\u4ee5\u901a\u8fc7 jQuery \u4e3a\u8868\u683c\u6dfb\u52a0\u4ea4\u4e92\u529f\u80fd，\u4f8b\u5982\u884c\u70b9\u51fb\u4e8b\u4ef6\u3001\u6392\u5e8f\u7b49\u3002<\/p>\n
<script>
\n$(document).on("pagecreate", "#table-demo", function() {
\n $("#interactive-table tbody tr").on("click", function() {
\n var name = $(this).find("td:first").text();
\n var score = $(this).find("td:last").text();
\n alert("\u5b66\u751f：" + name + "，\u6210\u7ee9：" + score);
\n });
\n});
\n<\/script><\/p>\n
<table data-role="table" data-mode="reflow" id="interactive-table">
\n <thead>
\n <tr>
\n <th>\u5b66\u751f\u59d3\u540d<\/th>
\n <th>\u8bed\u6587<\/th>
\n <th>\u6570\u5b66<\/th>
\n <th>\u82f1\u8bed<\/th>
\n <th>\u603b\u5206<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>\u5c0f\u660e<\/td>
\n <td>85<\/td>
\n <td>92<\/td>
\n <td>78<\/td>
\n <td>255<\/td>
\n <\/tr>
\n <tr>
\n <td>\u5c0f\u7ea2<\/td>
\n <td>90<\/td>
\n <td>88<\/td>
\n <td>95<\/td>
\n <td>273<\/td>
\n <\/tr>
\n <tr>
\n <td>\u5c0f\u521a<\/td>
\n <td>76<\/td>
\n <td>85<\/td>
\n <td>82<\/td>
\n <td>243<\/td>
\n <\/tr>
\n <\/tbody>
\n<\/table><\/p>\n
\u7ed3\u5408\u7b2c\u4e09\u65b9\u5e93\u5982 Tablesorter，\u53ef\u4ee5\u4e3a jQuery Mobile \u8868\u683c\u6dfb\u52a0\u6392\u5e8f\u529f\u80fd：<\/p>\n
<!– \u5f15\u5165 Tablesorter \u63d2\u4ef6 –>
\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.tablesorter\/2.31.3\/js\/jquery.tablesorter.min.js"><\/script><\/p>\n
<script>
\n$(document).on("pagecreate", "#sort-table", function() {
\n $("#sortable-table").tablesorter({
\n headers: {
\n 0: { sorter: "text" },
\n 1: { sorter: "digit" },
\n 2: { sorter: "digit" },
\n 3: { sorter: "digit" }
\n }
\n });
\n});
\n<\/script><\/p>\n
<table data-role="table" data-mode="reflow" id="sortable-table" class="tablesorter">
\n <thead>
\n <tr>
\n <th>\u57ce\u5e02<\/th>
\n <th>\u4eba\u53e3（\u4e07）<\/th>
\n <th>\u9762\u79ef（km\u00b2）<\/th>
\n <th>GDP（\u4ebf\u5143）<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>\u5317\u4eac<\/td>
\n <td>2154<\/td>
\n <td>16410<\/td>
\n <td>36102<\/td>
\n <\/tr>
\n <tr>
\n <td>\u4e0a\u6d77<\/td>
\n <td>2428<\/td>
\n <td>6340<\/td>
\n <td>38155<\/td>
\n <\/tr>
\n <tr>
\n <td>\u5e7f\u5dde<\/td>
\n <td>1530<\/td>
\n <td>7434<\/td>
\n <td>25019<\/td>
\n <\/tr>
\n <tr>
\n <td>\u6df1\u5733<\/td>
\n <td>1756<\/td>
\n <td>1997<\/td>
\n <td>27670<\/td>
\n <\/tr>
\n <\/tbody>
\n<\/table><\/p>\n
\u4e0b\u9762\u662f\u4e00\u4e2a\u7efc\u5408\u6027\u7684\u5b9e\u6218\u6848\u4f8b，\u7ed3\u5408\u4e86\u5217\u5207\u6362\u6a21\u5f0f\u3001\u4e3b\u9898\u6837\u5f0f\u548c\u4ea4\u4e92\u529f\u80fd：<\/p>\n
<!DOCTYPE html>
\n<html>
\n<head>
\n <meta charset="utf-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1">
\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.css">
\n <script src="https:\/\/code.jquery.com\/jquery-1.11.3.min.js"><\/script>
\n <script src="https:\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.js"><\/script>
\n <style>
\n .highlight-row { background-color: #e8f5e9 !important; }
\n .low-stock { color: #d32f2f; font-weight: bold; }
\n <\/style>
\n<\/head>
\n<body>
\n <div data-role="page" id="inventory-page">
\n <div data-role="header" data-theme="b">
\n <h1>\u5e93\u5b58\u7ba1\u7406\u7cfb\u7edf<\/h1>
\n <\/div>
\n <div data-role="main" class="ui-content">
\n <table data-role="table" data-mode="columntoggle" data-theme="b" id="inventory-table">
\n <thead>
\n <tr>
\n <th data-priority="persist">\u5546\u54c1\u540d\u79f0<\/th>
\n <th data-priority="1">\u5206\u7c7b<\/th>
\n <th data-priority="persist">\u5e93\u5b58\u91cf<\/th>
\n <th data-priority="2">\u5355\u4ef7<\/th>
\n <th data-priority="3">\u4f9b\u5e94\u5546<\/th>
\n <th data-priority="4">\u5165\u5e93\u65e5\u671f<\/th>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <tr>
\n <td>\u673a\u68b0\u952e\u76d8<\/td>
\n <td>\u5916\u8bbe<\/td>
\n <td class="low-stock">15<\/td>
\n <td>\u00a5399<\/td>
\n <td>A \u79d1\u6280<\/td>
\n <td>2024-01-15<\/td>
\n <\/tr>
\n <tr>
\n <td>\u65e0\u7ebf\u9f20\u6807<\/td>
\n <td>\u5916\u8bbe<\/td>
\n <td>128<\/td>
\n <td>\u00a589<\/td>
\n <td>B \u6570\u7801<\/td>
\n <td>2024-02-20<\/td>
\n <\/tr>
\n <tr>
\n <td>\u663e\u793a\u5668 27\u5bf8<\/td>
\n <td>\u663e\u793a\u8bbe\u5907<\/td>
\n <td class="low-stock">8<\/td>
\n <td>\u00a51899<\/td>
\n <td>C \u663e\u793a<\/td>
\n <td>2024-01-10<\/td>
\n <\/tr>
\n <tr>
\n <td>USB-C \u6269\u5c55\u575e<\/td>
\n <td>\u914d\u4ef6<\/td>
\n <td>56<\/td>
\n <td>\u00a5159<\/td>
\n <td>D \u914d\u4ef6<\/td>
\n <td>2024-03-05<\/td>
\n <\/tr>
\n <\/tbody>
\n <\/table>
\n <\/div>
\n <div data-role="footer" data-theme="b">
\n <h4>\u5e93\u5b58\u6570\u636e\u5b9e\u65f6\u66f4\u65b0<\/h4>
\n <\/div>
\n <\/div><\/p>\n
<script>
\n $(document).on("pagecreate", "#inventory-page", function() {
\n \/\/ \u9ad8\u4eae\u5e93\u5b58\u4f4e\u4e8e 20 \u7684\u884c
\n $("#inventory-table tbody tr").each(function() {
\n var stock = parseInt($(this).find("td:eq(2)").text());
\n if (stock < 20) {
\n $(this).addClass("highlight-row");
\n }
\n });<\/p>\n
\/\/ \u70b9\u51fb\u884c\u663e\u793a\u8be6\u7ec6\u4fe1\u606f
\n $("#inventory-table tbody tr").on("click", function() {
\n var name = $(this).find("td:first").text();
\n var stock = $(this).find("td:eq(2)").text();
\n alert("\u5546\u54c1：" + name + "\\\\n\u5f53\u524d\u5e93\u5b58：" + stock);
\n });
\n });
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\u5728\u4f7f\u7528 jQuery Mobile \u8868\u683c\u65f6，\u9700\u8981\u6ce8\u610f\u4ee5\u4e0b\u51e0\u70b9：<\/p>\n
jQuery Mobile \u63d0\u4f9b\u4e86\u5f3a\u5927\u4e14\u6613\u7528\u7684\u8868\u683c\u89e3\u51b3\u65b9\u6848，\u901a\u8fc7 data-role="table" \u914d\u5408 data-mode \u5c5e\u6027，\u5f00\u53d1\u8005\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u9002\u914d\u79fb\u52a8\u8bbe\u5907\u7684\u54cd\u5e94\u5f0f\u8868\u683c\u3002\u5217\u5207\u6362\u6a21\u5f0f\u9002\u5408\u5217\u6570\u8f83\u591a\u7684\u590d\u6742\u8868\u683c，\u91cd\u6392\u6a21\u5f0f\u5219\u9002\u5408\u5217\u6570\u8f83\u5c11\u7684\u7b80\u5355\u8868\u683c\u3002\u7ed3\u5408 jQuery \u7684\u4e8b\u4ef6\u5904\u7406\u548c\u7b2c\u4e09\u65b9\u63d2\u4ef6，\u8fd8\u53ef\u4ee5\u4e3a\u8868\u683c\u6dfb\u52a0\u4e30\u5bcc\u7684\u4ea4\u4e92\u529f\u80fd\u3002\u5e0c\u671b\u672c\u6587\u7684\u4ee3\u7801\u5b9e\u4f8b\u80fd\u5e2e\u52a9\u8bfb\u8005\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u7075\u6d3b\u8fd0\u7528 jQuery Mobile \u8868\u683c\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
1. \u5f15\u8a00\u5728\u79fb\u52a8\u7aef\u5f00\u53d1\u4e2d，\u8868\u683c\u6570\u636e\u7684\u5c55\u793a\u4e00\u76f4\u662f\u4e00\u4e2a\u6311\u6218\u3002\u5c4f\u5e55\u5c3a\u5bf8\u6709\u9650，\u4f20\u7edf\u7684 HTML \u8868\u683c\u5728\u624b\u673a\u4e0a\u5f80\u5f80\u663e\u793a\u4e0d\u5168，\u7528\u6237\u4f53\u9a8c\u8f83\u5dee\u3002jQuery Mobile \u63d0\u4f9b\u4e86\u4e00\u5957\u54cd\u5e94\u5f0f\u7684\u8868\u683c\u89e3\u51b3\u65b9\u6848，\u80fd\u591f\u81ea\u52a8\u9002\u914d\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8，\u8ba9\u8868\u683c\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u4e5f\u80fd\u6e05\u6670\u6613\u8bfb\u3002\u672c\u6587\u5c06\u8be6\u7ec6\u4ecb\u7ecd jQuery Mobile \u8868\u683c\u7684\u4f7f\u7528\u65b9\u6cd5，\u5e76\u901a\u8fc7\u4e30\u5bcc\u7684\u4ee3\u7801\u5b9e\u4f8b\u5e2e\u52a9\u8bfb\u8005\u5feb\u901f\u638c\u63e1\u30022. \u57fa\u7840\u8868\u683cjQuery Mobile \u4e2d\u7684\u57fa\u7840\u8868<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,3237,87],"topic":[],"class_list":["post-89141","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-jquery","tag-87"],"yoast_head":"\n