使用JQueryMobile做表格的條件篩選異常簡(jiǎn)單余掖，以前是使用改變Mysql的查詢條件來做篩選得到過濾后的結(jié)果爬迟，使用JQueryMobile則是在頁面顯示后本地做CSS改變：
\\引用JQuery和JQueryMobile
<script>window.jQuery || document.write('<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"><\/script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"><\/script>')</script>
<select id="filterTable-input">
<option value="" selected="selected">全部</option>
<option value="小區(qū)">小區(qū)</option>
<option value="家政">家政</option>
</select>
<table width="100%" data-role="table" data-mode="columntoggle" data-filter="true" data-input="#filterTable-input" id="Phone" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-text="顯示...">
<thead>
<tr>
<th style='text-align: left;vertical-align:middle;'>類別</th>
<th style='text-align: left;vertical-align:middle;'>姓名/機(jī)構(gòu)名</th>
<th></th>
<th style='text-align: right;vertical-align:middle;'>歡迎度</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td style='text-align: left;vertical-align:middle;'>小區(qū)</td>
<td style='text-align: left;vertical-align:middle;'><a href='Show_Phone.php?id=1'>花城物業(yè)</a></td>
<td style='text-align: left;vertical-align:middle;'>機(jī)構(gòu)</td>
<td style='text-align: right;vertical-align:middle;'><span class='ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-right' id='R_Useful'>1</span></td>
</tr>
<tr id='2'>
<td style='text-align: left;vertical-align:middle;'>家政</td>
<td style='text-align: left;vertical-align:middle;'><a href='Show_Phone.php?id=2'>曹阿姨</a></td>
<td style='text-align: left;vertical-align:middle;'>女</td>
<td style='text-align: right;vertical-align:middle;'><span class='ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-right' id='R_Useful'>2</span></td>
</tr>
</tbody>
</table>
效果：
2018-03-23_095854.jpg
2018-03-23_095939.jpg
如果想將下拉列表變成搜索框，只要將<select>部分變成：
<input id="filterTable-input" data-type="search">
