固定された左のヘッダー列のテーブル検索

Question

固定された左の列テーブルを作成し、特定の列が行ではないことを示す検索を組み込みたいとします。

はこれまでのところ、私は行のみを表示するこの発見しました： How to perform a real time search and filter on a HTML table

をしかし、私のヘッダが列にあるので、このアプローチは非常にうまく機能しません。

はところで、ほとんどのJavaScriptのnoob午前、そう私と一緒にクマ..：P

私がやろうとしているかを示している私のcodepenをチェックアウトしてください。 http://codepen.io/genemiester/pen/qZrpgZ

var $rows = $('#table tr'); 
$('#search').keyup(function() { 
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

$rows.show().filter(function() { 
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
    return !~text.indexOf(val); 
}).hide(); 
}); 

が、これは明らかであると思いますか？助けをあらかじめありがとう！

Answer 1

更新テーブルフィルタを目指していたものであると思います：あなたはあなたのスクリーンショットの上を示して
フィルタデータ。

JSコードを変更しました表からといくつかのCSS変更がありました。
デモを一度確認してください。

$(document).ready(function() { 
 
    $("#clearsearch").click(function() { 
 
     $("#clearsearch").fadeOut(300); 
 
     $("#search").val(""); 
 
     $("#contentsearch div span").removeClass('success'); 
 
     $("#contentsearch div").removeClass('hide'); 
 
    }); 
 
    $("#search").keyup(function() { 
 
     var result = $(this).val().replace(/ +?/g, "").toLowerCase(); 
 
     if (result != null && result != "") { 
 
      $("#clearsearch").fadeIn(300); 
 
      $("#contentsearch div").addClass('hide'); 
 
      $("#contentsearch div").find('span').each(function() { 
 
       var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase(); 
 
       if (tbresult.indexOf(result) !== -1) { 
 
        $(this).closest('div').removeClass('hide'); 
 
        $(this).addClass('success'); 
 
       } else { 
 
        $(this).removeClass('success'); 
 
       } 
 
      }); 
 
     } else { 
 
      $("#clearsearch").fadeOut(300); 
 
      $("#contentsearch div").removeClass('hide'); 
 
      $("#contentsearch div span").removeClass('success'); 
 
     } 
 
    }); 
 
});

.gap{ height: 10px;} 
 
.hide{dispaly: none;} 
 
#search{ padding-right: 15px;} 
 
.form-group span{ position: relative; left: -24px; top: 3px; cursor: pointer; display: none;} 
 
.form-group span:hover{ color: red;} 
 
.success{ 
 
    background-color: #dff0d8; 
 
} 
 
.tableheads, #contentsearch div{ 
 
    border: 1px solid #ddd; 
 
box-shadow: 1px 0px 0px 0px rgba(221,221,221,1); 
 
    float: left; 
 
    display: inline-block; 
 
} 
 
.tableheads span, #contentsearch div span{ 
 
    padding: 8px; 
 
    display: block; 
 
    float: none; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.tableheads span{ 
 
    background-color: #f5f5f5; 
 
} 
 
.no-border-bottom{ 
 
    border-bottom: none !important; 
 
} 
 
.no-border-right{ 
 
    border-right: none !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="clearfix gap"> 
 
    </div> 
 
    <div class="form-inline"> 
 
     <div class="form-group"> 
 
     <label>Search : 
 
     </label> 
 
     <input type="text" class="form-control" name="search" id="search" placeholder="Search"> 
 
     <span id="clearsearch" class="glyphicon glyphicon-remove"> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="clearfix gap"> 
 
    </div> 
 
    <div class="tableheads no-border-right"> 
 
     <span>Name 
 
     </span> 
 
     <span>State 
 
     </span> 
 
     <span class="no-border-bottom">Location 
 
     </span> 
 
    </div> 
 
    <div id="contentsearch"> 
 
     <div class="no-border-right"> 
 
     <span>John 
 
     </span> 
 
     <span>Telangana 
 
     </span> 
 
     <span class="no-border-bottom">Hyderabad 
 
     </span> 
 
     </div> 
 
     <div class="no-border-right"> 
 
     <span>Nathaniel 
 
     </span> 
 
     <span>Andhrapradesh 
 
     </span> 
 
     <span class="no-border-bottom">Vijag 
 
     </span> 
 
     </div> 
 
     <div class="no-border-right"> 
 
     <span>Charles 
 
     </span> 
 
     <span>Tamilnadu 
 
     </span> 
 
     <span class="no-border-bottom">Chennai 
 
     </span> 
 
     </div> 
 
     <div class="no-border-right"> 
 
     <span>Christian 
 
     </span> 
 
     <span>Karnataka 
 
     </span> 
 
     <span class="no-border-bottom">Bangalore 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="clearfix gap"> 
 
    </div> 
 
    </div> 
 
</div>

表 - 検索デモ：
素晴らしいテーブル検索オプションを使用して前のデモ。

$(document).ready(function() { 
 
    $("#clearsearch").click(function() { 
 
     $("#clearsearch").fadeOut(300); 
 
     $("#search").val(""); 
 
     $("#tablecontent tbody tr td").removeClass('success'); 
 
     $("#tablecontent tbody tr").removeClass('hide'); 
 
    }); 
 
    $("#search").keyup(function() { 
 
     var result = $(this).val().replace(/ +?/g, "").toLowerCase(); 
 
     if (result != null && result != "") { 
 
      $("#clearsearch").fadeIn(300); 
 
      $("#tablecontent tbody tr").addClass('hide'); 
 
      $("#tablecontent tbody tr").find('td').each(function() { 
 
       var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase(); 
 
       if (tbresult.indexOf(result) !== -1) { 
 
        $(this).closest('tr').removeClass('hide'); 
 
        $(this).addClass('success'); 
 
       } else { 
 
        $(this).removeClass('success'); 
 
       } 
 
      }); 
 
     } else { 
 
      $("#clearsearch").fadeOut(300); 
 
      $("#tablecontent tbody tr").removeClass('hide'); 
 
      $("#tablecontent tbody tr td").removeClass('success'); 
 
     } 
 
    }); 
 
});

.gap{ 
 
    height: 10px; 
 
} 
 
.hide{ 
 
     dispaly: none; 
 
} 
 
#search{ 
 
     padding-right: 15px; 
 
} 
 
.form-group span{ 
 
     position: relative; 
 
     left: -24px; 
 
     top: 3px; 
 
     cursor: pointer; 
 
     display: none; 
 
} 
 
.form-group span:hover{ 
 
     color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="clearfix gap"></div> 
 
     <div class="form-inline"> 
 
     <div class="form-group"> 
 
      <label>Search :</label> 
 
      <input type="text" class="form-control" name="search" id="search" placeholder="Search"> 
 
      <span id="clearsearch" class="glyphicon glyphicon-remove"></span> 
 
     </div> 
 
     </div> 
 
     <div class="clearfix gap"></div> 
 
     <table id="tablecontent" class="table table-bordered"> 
 
     <thead> 
 
      <tr class="active"> 
 
       <th>S.No.</th> 
 
       <th>Name</th> 
 
       <th>Country</th> 
 
       <th>Location</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>1</td> 
 
       <td>John</td> 
 
       <td>India</td> 
 
       <td>Hyderabad</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>Nathaniel</td> 
 
       <td>India</td> 
 
       <td>Mumbai</td> 
 
      </tr> 
 
      <tr> 
 
       <td>3</td> 
 
       <td>Charles</td> 
 
       <td>India</td> 
 
       <td>Pune</td> 
 
      </tr> 
 
      <tr> 
 
       <td>4</td> 
 
       <td>Christian</td> 
 
       <td>India</td> 
 
       <td>Secunderabad</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
</div>

Answer 2

はこれを試してみてください、私は、これはあなたが

var $rows = $('table tbody tr'); 
 
$('#search').keyup(function() { 
 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
 

 
    var regular_expression = new RegExp(escapeRegExp(val)); 
 

 
    $rows.show().filter(function() { 
 
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
 
    return !text.match(regular_expression); 
 
    }).hide(); 
 
}); 
 

 
function escapeRegExp(str) { 
 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="search"> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>google</td> 
 
     <td>Bing</td> 
 
     <td>Search Engine</td> 
 
    </tr> 
 

 

 
    <tr> 
 
     <td>Opera</td> 
 
     <td>Chrome</td> 
 
     <td>FireFox</td> 
 
    </tr> 
 
    </tbody> 
 
</table>