jQuery検索トグルテーブル行

Question

私はトグルできる行のテーブルを持っています。今私はテーブルで検索したいです。私の検索機能は動作しますが、非表示の行は表示されません。これどうやってするの？ここで私の検索機能。

$(document).ready(function(){ 
 
    $("#search").keyup(function(){ 
 
    var search = $(this).val(); 
 
    $("table tbody tr").hide(); 
 
    $(".header-1").show(); 
 
    $(".header-2").show(); 
 
    $("table tbody tr td:contains("+search+")").each(function(){ 
 
     $(this).closest("tr").show(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="skills" id="skills" width="100%" cellspacing="0"> 
 
    <tr class="header-1"> 
 
    <th>Skill</th> 
 
    <th colspan="2">Theoretische Kenntnisse</th> 
 
    <th>Praktische Kenntnisse</th> 
 
    <th class="skills_pfl">Zuletzt gepfelgt</th> 
 
    </tr> 
 
    <tr class="header-2"> 
 
    <th></th> 
 
    <th class="skills_ausb">Ausgebildet</th> 
 
    <th class="skills_ausb_jhr">Ausbildungsjahr</th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr id="74" class="skills_kat"> 
 
    <td style="text-align: left;" class="show" 
 
     onclick="$('#body-74').toggle(300); $('#fa-74').toggleClass('fa-caret-right').toggleClass('fa-caret-down');"> 
 
     <i class="fa fa-caret-right" id="fa-74"></i> &nbsp;Anwendungsgebiete 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tbody id="body-74" class="table-body"></tbody> 
 
    <tr id="116" class="skills_kat"> 
 
    <td style="text-align: left;" class="show" 
 
     onclick="$('#body-116').toggle(300); $('#fa-116').toggleClass('fa-caret-right').toggleClass('fa-caret-down');"> 
 
     <i class="fa fa-caret-right" id="fa-116"></i> &nbsp;Application Server 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

一部の人々は私をunderstandtません。検索ロジックは正常に動作しますが、クリックして切り替えることができる行があります。テーブルを検索すると、これらの行は表示されません。ここにスクリーンショット。

Answer 1

なぜあなたは周りのロジックを有効にしないと隠すだけで、あなたは見たくありませんか？そのような：

$(document).ready(function() { 
 
    var consolidatedArray = $("table tbody tr td").slice(); 
 
    $("#search").keyup(function() { 
 
    
 
    var search = $(this).val(); 
 
    $("table tbody tr").show() 
 
    $(".header-1").show(); 
 
    $(".header-2").show(); 
 
    $("table tbody tr td:not(:contains(" + search + "))").each(function() { 
 
     $(this).closest("tr").hide(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>abc</td> 
 
    </tr> 
 
    <tr> 
 
     <td>efg</td> 
 
    </tr> 
 
    <tr> 
 
     <td>xsd</td> 
 
    </tr> 
 
    <tr> 
 
     <td>sdf</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ffs</td> 
 
    </tr> 
 
    <tr> 
 
     <td>abc</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<input id="search" type="text"/>