手风琴可搜索的表格

时间：2017-10-14 02:47:41

标签： javascript jquery html

是否可以用手风琴进行搜索（用户搜索产品）？

我的手风琴有34个类别，每个都有一个10行最小的表，每个表都有一个带有图标的列，它收集行的数据（这个图标我准备好了，这不适用于jQuery表，因为我不要使用它）

如果有人知道我错在哪里告诉我或指导我，这个javascript对我来说还是新的。

由于

＆＃13;
＆＃13; 
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();
    });
  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

在slide（）函数中，替换 var id = this.id;与var id = $(this).attr("id");

。{
相关问题
最新问题