复制代码 代码如下:

<table>

<thead>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Email</th>

<th>Phone Number</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Smith</td>

<td><a href="mailto:john.s">john.s</a></td>

<td>(613) 873-2982</td>

</tr>

<tr>

<td>Sean</td>

<td>MacIsaac</td>

<td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td>

<td>(613) 871-6191</td>

</tr>

<tr>

<td>Tim</td>

<td>Zarby</td>

<td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td>

<td>(613) 743-5389</td>

</tr>

<tr>

<td>Andrew</td>

<td>Nichols</td>

<td><a href="mailto:andy_money2003">andy_money2003</a></td>

<td>(613) 741-3384</td>

</tr>

<tr>

<td>Ally</td>

<td>O'Neil</td>

<td><a href="mailto:allyoneil">allyoneil</a></td>

<td>(613) 642-9831</td>

</tr>

</tbody>

</table>

<br/>

<p>To make a table searchable, add the class 'table-sort-search' to the <table> tag.<br/>

<br/>

<strong>Example:</strong></p>

<pre><code><table></table></code></pre>

<br/>

<table>

<thead>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Email</th>

<th>Phone Number</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Smith</td>

<td><a href="mailto:john.s">john.s</a></td>

<td>(613) 873-2982</td>

</tr>

<tr>

<td>Sean</td>

<td>MacIsaac</td>

<td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td>

<td>(613) 871-6191</td>

</tr>

<tr>

<td>Tim</td>

<td>Zarby</td>

<td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td>

<td>(613) 743-5389</td>

</tr>

<tr>

<td>Andrew</td>

<td>Nichols</td>

<td><a href="mailto:andy_money2003">andy_money2003</a></td>

<td>(613) 741-3384</td>

</tr>

<tr>

<td>Ally</td>

<td>O'Neil</td>

<td><a href="mailto:allyoneil">allyoneil</a></td>

<td>(613) 642-9831</td>

</tr>

</tbody>

</table>

<br/>

<p>To make the search text input show the search match count, add the class 'table-sort-show-search-count' to the <table> tag.<br/>

<br/>

<strong>Example</strong></p>

<pre><code><table></table></code></pre>

<br/>

<table>

<thead>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Email</th>

<th>Phone Number</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Smith</td>

<td><a href="mailto:john.s">john.s</a></td>

<td>(613) 873-2982</td>

</tr>

<tr>

<td>Sean</td>

<td>MacIsaac</td>

<td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td>

<td>(613) 871-6191</td>

</tr>

<tr>

<td>Tim</td>

<td>Zarby</td>

<td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td>

<td>(613) 743-5389</td>

</tr>

<tr>

<td>Andrew</td>

<td>Nichols</td>

<td><a href="mailto:andy_money2003">andy_money2003</a></td>

<td>(613) 741-3384</td>

</tr>

<tr>

<td>Ally</td>

<td>O'Neil</td>

<td><a href="mailto:allyoneil">allyoneil</a></td>

<td>(613) 642-9831</td>

</tr>

</tbody>

</table>

【jquery 表格排序、实时搜索表格内容(附图)】相关文章：

★ Js和JQuery获取鼠标指针坐标的实现代码分享

★ jQuery实现表格行上下移动和置顶效果

★ Jquery使用css方法改变样式实例

★ jQuery实现返回顶部效果的方法

★ jquery实现动态改变div宽度和高度

★ JavaScript实现表格点击排序的方法

★ jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

★ jQuery zTree加载树形菜单功能

★ jQuery常用知识点总结以及平时封装常用函数

★ jquery表单对象属性过滤选择器用法