テーブル絞込、and検索

仕様

動作

セレクトボックス、チェックボックス、ラジオボタンでand検索してテーブルをフィルタ

ソース

HTML

test013.htm

<html>
<head>
<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="javascript/text" src="test013.js"></script>
<link rel="stylesheet" type="text/css" href="test013.css">
<title>テーブル絞込、and検索</title>
</head>
<body>
<div id="search-bx">
<select id="1-select" class="store-select" name="area">
<option value="">地域から検索</option>
<option value="1-area">1-地域</option>
<option value="2-area">2-地域</option>
<option value="3-area">3-地域</option>
</select>

<div id="2-checkbox">
<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
</div>

<div id="3-radio">
<label><input type="radio" name="brand" value="all">ブランド-all</label>
<label><input type="radio" name="brand" value="1-brand">1-ブランド</label>
<label><input type="radio" name="brand" value="2-brand">2-ブランド</label>
<label><input type="radio" name="brand" value="3-brand">3-ブランド</label>
</div>

<input type="button" id="reset" value="選択をクリアする">
</div>

<div id="store-data">
<table>
<thead>
<tr class="active">
<td>地域</td>
<td>都市</td>
<td>ブランド</td>
</tr>
</thead>
<tbody>
<tr>
<td class="area"><span class="1-area">1-地域</span></td>
<td class="city"><span class="1-city">1-都市</span></td>
<td class="brand"><span class="1-brand">1-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-area">1-地域</span></td>
<td class="city"><span class="2-city">2-都市</span></td>
<td class="brand"><span class="2-brand">2-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-area">1-地域</span></td>
<td class="city"><span class="3-city">3-都市</span></td>
<td class="brand"><span class="3-brand">3-ブランド</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

CSS

test013.css

table{
  border-collapse:collapse;
}
td,th{
  border:solid 1px #000000;
}
th{
  background-Color:yellow;
}

javascript

test013.js

$(function(){
  $('[name=area],[name=city],[name=brand]').on('change',function(){
    var area=$('[name=area]').val()==""?"":'.'+$('[name=area]').val();
    var city=[];
    $('[name=city]:checked').each(function(){city.push('.'+$(this).val())});
    var brand=$('[name=brand]:checked').length>0?'.'+$('[name=brand]:checked').val():"";
    $('#err').remove();
    if(area=="" && city.length==0 && brand==""){
      $('#store-data table tbody tr').show();
    }else{
      var tr=$('#store-data table tbody tr').hide().filter(function(){
        return area==""?true:$(this).has(area).length>0;
      }).filter(function(){
        return (brand==""||brand==".all")?true:$(this).has(brand).length>0;
      }).filter(function(){
        return city.length==0?true:$(this).has(city.join(",")).length>0;
      }).show();
      if(tr.length==0){
        $("#store-data table").after($('<div>').attr('id','err').text("該当なし"));
      }
    }
  }).eq(0).trigger('change');
  $('#reset').on('click',function(e){
    $('[name=area]').prop('selectedIndex',0);
    $('[name=city]').prop('checked',false);
    $('[name=brand]').prop('checked',false).trigger('change');
  });
});

[test013] テーブル絞込、and検索

テーブル絞込、and検索

仕様

動作

ソース

HTML

CSS

javascript

その他：

元ネタ

動くソース