アコーディオンの検索可能なテーブル

Question

アコーディオンで検索（商品を検索）することは可能ですか？

私のaccordionには34のカテゴリがあり、それぞれに10行分のテーブルがあり、各テーブルにはアイコン付きの列があり、行のデータを収集します（このアイコンは準備ができています。これはjQueryテーブル私はそれを使用しないでください）

私が間違っている場所を知っているか、私を案内してください、このjavascriptはまだ私に新しいです。スライド（）関数で

おかげ

function slide(c) 
 
{ 
 
    $('#base').children('.tb').each(function() { 
 

 
    var id = this.id; 
 
    if(id == c){ 
 
     $("#"+c).slideToggle(); 
 
    } 
 
    else{ 
 
     $("#"+id).slideUp(); 
 
    } 
 
    }) 
 

 
}; 
 

 
// Write on keyup event of keyword input element 
 
$(document).ready(function(){ 
 
    $("#search").keyup(function(){ 
 
    _this = this; 
 
// Show only matching TR, hide rest of them 
 
    $.each($(".table1 tbody tr"), function() { 
 
     $("table").removeClass("tb").addClass("tx"); 
 
     if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) 
 
     $(this).hide(); 
 
     else 
 
     $(this).show(); 
 
    }); 
 
    }); 
 
});

#base{ 
 
    display:inline; 
 
    width:55%; 
 
    float:left; 
 
    margin-top:40px; 
 
    } 
 
    tr.row-2>td{ 
 
    font-weight: bold; 
 
    color:black; 
 
} 
 
td{ 
 
    padding:10px; 
 
} 
 
td.column-4{ 
 
    text-align:center; 
 
} 
 
td.column-5{ 
 
    width: 10px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 
.tb{ 
 
    max-width:100wh; 
 
    width:95%; 
 
} 
 
.tx{ 
 
    max-width:100wh; 
 
    width:95%; 
 
} 
 
.nm{ 
 
    display: none; 
 
} 
 
.tipo{ 
 
    margin: 0 auto; 
 
} 
 
h2,.tipo i{ 
 
    display:inline; 
 
    width:auto; 
 
} 
 
.tipo i.fa{ 
 
    font-size:24px; 
 
    width:40px; 
 
    margin-left:30px; 
 
    padding:2px 0 5px 0; 
 
}

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

 
    <script src="https://use.fontawesome.com/141dcb7b72.js"></script> 
 
<div id="base"> 
 
<div class="nav_tb"> 
 
     <div class="form-group"> 
 
     <button type="button" name="button">ask</button> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <input type="text" class="form-control pull-right buscar" id="search" placeholder="type product"> 
 
     </div> 
 

 
    </div> 
 
    <div id="base"> 
 
     <div class="tipo cat1" onclick="slide('productos1')"> 
 
     <h2 class="sec_prod">Productos</h2><i class="fa fa-sort-desc" aria-hidden="true"></i> 
 
     </div> 
 
     <table class="table1 nm tb" id="productos1"> 
 
     <thead> 
 
      <tr class="row-2 even" role="row"> 
 
      <td class="headercolumn-1">Name</td> 
 
      <td class="headercolumn-2">Descriptión</td> 
 
      <td class="headercolumn-3">Presentatión</td> 
 
      <td class="headercolumn-4">Brand</td> 
 
      <td class="headercolumn-5">Add</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="row-4 even" role="row"> 
 
     <td class="column-1">dato1</td> 
 
      <td class="column-2">John</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-5 odd" role="row"> 
 
      <td class="column-1">Gray</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">Dean</td> 
 
      <td class="column-4">Tiffany</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-6 even" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-7 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">red</td> 
 
      <td class="column-3">cup</td> 
 
      <td class="column-4">soccer</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-8 even" role="row"> 
 
     <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-9 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-12 even" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-13 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-14 even" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-15 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-16 even" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <div class="tipo cat2" onclick="slide('productos2')"> 
 
     <h2 class="sec_prod">Marcadores</h2><i class="fa fa-sort-desc" aria-hidden="true"></i> 
 
     </div> 
 
     <table class="table2 nm tb" id="productos2"> 
 
     <thead> 
 
      <tr class="row-2 even" role="row"> 
 
       <td class="headercolumn-1">Name</td> 
 
      <td class="headercolumn-2">Descriptión</td> 
 
      <td class="headercolumn-3">Presentatión</td> 
 
      <td class="headercolumn-4">Brand</td> 
 
      <td class="headercolumn-5">Add</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="row-20 even" role="row"> 
 
       <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-21 odd" role="row"> 
 
       <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-22 even" role="row"> 
 
       <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
      <tr class="row-23 odd" role="row"> 
 
       <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    <div class="tipo cat3" onclick="slide('productos3')"> 
 
     <h2 class="sec_prod">Tiempo Real</h2><i class="fa fa-sort-desc" aria-hidden="true"></i> 
 
    </div> 
 
    <table class="table3 nm tb" id="productos3"> 
 
     <thead> 
 
     <tr class="row-2 even" role="row"> 
 
      <td class="headercolumn-1">Name</td> 
 
      <td class="headercolumn-2">Descriptión</td> 
 
      <td class="headercolumn-3">Presentatión</td> 
 
      <td class="headercolumn-4">Brand</td> 
 
      <td class="headercolumn-5">Add</td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr class="row-29 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-31 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-32 even" role="row"> 
 
       <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-33 odd" role="row"> 
 
       <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-36 even" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-38 even" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">dato2</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-39 odd" role="row"> 
 
      <td class="column-1">dato1</td> 
 
      <td class="column-2">John</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     <tr class="row-40 even" role="row"> 
 
      <td class="column-1">Tiffany</td> 
 
      <td class="column-2">Dean</td> 
 
      <td class="column-3">dato3</td> 
 
      <td class="column-4">dato4</td> 
 
      <td class="column-5"></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div>

Answer 1

、var id = $(this).attr("id");

で var id = this.id;を置き換えます