(function($) { $.fn.multifilter = function(options) { var settings = $.extend( { 'target' : $('table') }, options); jQuery.expr[":"].Contains = function(a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; this.each(function() { var $this = $(this); container = settings.target row_tag = 'tr'; item_tag = 'td' rows = container.find($('tbody ' + row_tag)) var col = container.find('th:Contains(' + $this.attr('name') + ')'); var col_index = container.find($('thead th')).index(col); $this.change(function() { input = $this filter = $this.val(); rows.each(function() { hidden_rows = [] visible_rows = [] row = $(this); cell = $(row.children(item_tag)[col_index]) if (filter) { if (cell.text().toLowerCase().indexOf(filter.toLowerCase()) != -1) { cell.attr('data-filtered', 'positive'); } else { cell.attr('data-filtered', 'negative'); } if (row.find(item_tag + "[data-filtered=negative]").size() > 0) { row.hide(); } else { if (row.find(item_tag + "[data-filtered=positive]").size() > 0) { row.show(); } } } else { cell.attr('data-filtered', 'positive'); if (row.find(item_tag + "[data-filtered=negative]").size() > 0) { row.hide(); } else { if (row.find(item_tag + "[data-filtered=positive]").size() > 0) { row.show(); } } } }) return false; }).keyup(function() { $this.change(); }); }); }; })(jQuery);(jQuery); $(document).ready(function() { $('.filter').multifilter() })
.actions a { display: block; margin: 25px auto 0; width: 200px; text-align: center; background: #b31d14; color: #c8c8c8; padding: 6px; border-radius: 3px; text-decoration: none; } .filters { margin-bottom: 20px; } .filter-container { float: left; width: 20%; padding-right: 10px; } .filter-container:last-of-type { padding-right: 0; } .filter-container input { -webkit-appearance: none; border: 1px solid #999; background: #eee; border-radius: 3px; font-size: 18px; width: 100%; } .filter-container input:focus { outline: none; } table { width: 100%; border-collapse: collapse; } table th { text-align: left; border-bottom: 1px solid #043a47; } table th, table td { padding: 6px 4px; } table td { border-bottom: 1px solid #087891; } table tr:last-of-type td { border-bottom: none; } table tr td:last-of-type { border-right: none; } .clearfix { clear: both; width: 100%; }
<div class='container'> <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div class='filter-container'> <input autocomplete='off' class='filter' name='性別' placeholder='性別' /> </div> <div class='filter-container'> <input autocomplete='off' class='filter' name='誕生日' placeholder='誕生日' /> </div> <div class='filter-container'> <input autocomplete='off' class='filter' name='キャリア' placeholder='キャリア' /> </div> <div class='clearfix'></div> </div> </div> <div class='container'> <table> <thead> <th>名前</th> <th>性別</th> <th>誕生日</th> <th>キャリア</th> </thead> <tbody> <tr><td>日高 太朗</td><td>男</td><td>2013/4/5</td><td>ドコモ</td></tr> <tr><td>山西 那奈</td><td>女</td><td>2012/9/14</td><td>ソフトバンク</td></tr> <tr><td>高松 知世</td><td>女</td><td>2013/3/20</td><td>ドコモ</td></tr> <tr><td>大矢 翔太</td><td>男</td><td>2013/1/9</td><td>ドコモ</td></tr> <tr><td>平松 奈央</td><td>女</td><td>2013/4/13</td><td>ドコモ</td></tr> <tr><td>阿部 ヒカル</td><td>女</td><td>2013/5/30</td><td>au</td></tr> <tr><td>小川 みき</td><td>女</td><td>2013/2/9</td><td>au</td></tr> <tr><td>小室 和香</td><td>女</td><td>2013/3/29</td><td>ドコモ</td></tr> <tr><td>前川 薫</td><td>女</td><td>2012/12/16</td><td>ソフトバンク</td></tr> <tr><td>大林 陽介</td><td>男</td><td>2013/5/22</td><td>ドコモ</td></tr> </tbody> </table>