欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery 表格排序、實時搜索表格內(nèi)容(附圖)

 更新時間：2014年05月19日 16:01:21   作者：  
這篇文章主要介紹了jquery如何實現(xiàn)表格排序、實時搜索表格內(nèi)容,需要的朋友可以參考下

復制代碼 代碼如下:

<table class="table-sort">
<thead>
<tr>
<th class="table-sort">First Name</th>
<th class="table-sort">Last Name</th>
<th class="table-sort">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 class="html"><table class="table-sort table-sort-search"></table></code></pre>
<br/>
<table class="table-sort table-sort-search">
<thead>
<tr>
<th class="table-sort">First Name</th>
<th class="table-sort">Last Name</th>
<th class="table-sort">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 class="table-sort table-sort-search table-sort-show-search-count"></table></code></pre>
<br/>
<table class="table-sort table-sort-search table-sort-show-search-count">
<thead>
<tr>
<th class="table-sort">First Name</th>
<th class="table-sort">Last Name</th>
<th class="table-sort">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>

相關(guān)文章

  • jQuery的position()方法詳解

    jQuery的position()方法詳解

    position()函數(shù)用于返回當前匹配元素相對于其被定位的祖輩元素的偏移，也就是相對于被定位的祖輩元素的坐標。該函數(shù)只對可見元素有效。
    2015-07-07
  • jQuery學習筆記之jQuery中的$

    jQuery學習筆記之jQuery中的$

    這篇文章主要介紹了jQuery學習筆記之jQuery中的$的相關(guān)資料,需要的朋友可以參考下
    2015-01-01
  • SinaEditor使用方法詳解

    SinaEditor使用方法詳解

    本篇文章主要是對SinaEditor使用方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • jQuery dateRangePicker插件使用方法詳解

    jQuery dateRangePicker插件使用方法詳解

    這篇文章主要為大家詳細介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • 使用js顯示當前時間示例

    使用js顯示當前時間示例

    這篇文章主要介紹了使用js顯示當前時間示例,這里也用到了jquery，讓得把它也要引入到頁面中
    2014-03-03
  • 10款新鮮出爐的 jQuery 插件(Ajax 插件，有幻燈片、圖片畫廊、菜單等)

    10款新鮮出爐的 jQuery 插件(Ajax 插件，有幻燈片、圖片畫廊、菜單等)

    這篇文章與大家分享的是10款新鮮出爐的基于 jQuery 開發(fā)的 Ajax 插件，有幻燈片、圖片畫廊、菜單等很多有用的插件。這些作者的想法特別新穎，希望你能從中找到自己需要的插件。
    2011-06-06
  • jQuery Selectors(選擇器)的使用(二、層次篇)

    jQuery Selectors(選擇器)的使用(二、層次篇)

    本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學習方法：先入門，后進階！
    2009-12-12
  • jquery獲取transform里的值實現(xiàn)方法

    jquery獲取transform里的值實現(xiàn)方法

    下面小編就為大家分享一篇jquery獲取transform里的值實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • jQuery判斷一個元素是否可見的方法

    jQuery判斷一個元素是否可見的方法

    這篇文章主要介紹了jQuery判斷一個元素是否可見的方法,涉及jQuery鏈式操作及樣式判定的技巧,需要的朋友可以參考下
    2015-06-06
  • jquery實現(xiàn)用戶登陸界面(示例講解)

    jquery實現(xiàn)用戶登陸界面(示例講解)

    下面小編就為大家?guī)硪黄猨query實現(xiàn)用戶登陸界面(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09

最新評論