TABLE一覧の条件付き書式

<!-- 【 CSS 】 ---------------------------------------------- -->
<style type="text/css">
  #sampleTable  th            {border : 1px solid #666;}
  #sampleTable  td            {border : 1px solid #666;}
  .allNoDisplay tr            {background: #fff;font-style: normal}
  .fruit        tr[fruit]     {background: #babaff;font-style: italic}
  .vegetable    tr[vegetable] {background: #ceffce;font-style: italic}
  .meat         tr[meat]      {background: #ffbba2;font-style: italic}
</style>

<!-- 【 JavaScript 】 -------------------------------------- -->
<script type="text/javascript">
function goFilter(){
  var wTable = document.getElementById("sampleTable");
  var wSelect = document.getElementById("sampleSelect");
  var value  = wSelect.options[wSelect.selectedIndex ].value;
  if(value == 'all'){
    // --- 全ての場合は初期のクラスのみとする ---
    wTable.className = 'allNoDisplay';
  }else{
    // --- 指定属性を持つTRのみ書式を変更 ---
    wTable.className = 'allNoDisplay ' + value;
  }
}
</scriptt>

<!-- 【 HTML 】 ------------------------------------------- -->
<table style="width:300px;" id="sampleTable" class="allNoDisplay">
  <tr>
    <th>No</th>
    <th>
        <select id="sampleSelect" onChange="goFilter();">
          <option value="all">全て</option>
          <option value="fruit">くだもの</option>
          <option value="vegetable">野菜</option>
          <option value="meat">肉</option>
        </select>
    </th>
    <th>金額</th></tr>
  <tr fruit><td>1</td><td>りんご</td><td>500円</td></tr>
  <tr vegetable><td>2</td><td>レタス</td><td>298円</td></tr>
  <tr meat><td>3</td><td>鶏肉</td><td>249円</td></tr>
  <tr fruit><td>4</td><td>みかん</td><td>398円</td></tr>
  <tr vegetable><td>5</td><td>キャベツ</td><td>198円</td></tr>
  <tr meat><td>6</td><td>牛肉</td><td>560円</td></tr>
  <tr meat><td>7</td><td>豚肉</td><td>318円</td></tr>
  <tr vegetable fruit><td>8</td><td>トマト</td><td>198円</td></tr>
</table>

<!-- 【 CSS 】 ---------------------------------------------- -->
<style type="text/css">
  #sampleTable2  th            {border : 1px solid #666;}
  #sampleTable2  td            {border : 1px solid #666;}
  .allNoDisplay2 tr            {background: #fff;font-style: normal}
  .fruit2        tr[fruit]     {background: #babaff;font-style: italic}
  .vegetable2    tr[vegetable] {background: #ceffce;font-style: italic}
  .meat2         tr[meat]      {background: #ffbba2;font-style: italic}
</style>

<!-- 【 JavaScript 】 -------------------------------------- -->
<script type="text/javascript">
function goFilter2(){
  var wTable = document.getElementById("sampleTable2");
  var value  = '';

  // --- 選択されている商品のクラスを割り当てる ---
  if(document.getElementById("chkFruit").checked)    {value += ' fruit2';}
  if(document.getElementById("chkVegetable").checked){value += ' vegetable2';}
  if(document.getElementById("chkMeat").checked)     {value += ' meat2';}

  if(value == ''){
    // --- 全ての場合は初期のクラスのみとする ---
    wTable.className = 'allNoDisplay2';
  }else{
    // --- 指定属性を持つTRのみ書式を変更 ---
    wTable.className = 'allNoDisplay2 ' + value;
  }
}
</scriptt>

<!-- 【 HTML 】 ------------------------------------------- -->
<table style="width:300px;" id="sampleTable" class="allNoDisplay2">
  <tr>
    <th colspan="3">
        <input type="checkbox" onChange="goFilter2()" id="chkFruit">くだもの
        <input type="checkbox" onChange="goFilter2()" id="chkVegetable">野菜
        <input type="checkbox" onChange="goFilter2()" id="chkMeat">肉
    </th>
  </tr>
  <tr><th>No</th><th>商品</th><th>金額</th></tr>
  <tr fruit><td>1</td><td>りんご</td><td>500円</td></tr>
  <tr vegetable><td>2</td><td>レタス</td><td>298円</td></tr>
  <tr meat><td>3</td><td>鶏肉</td><td>249円</td></tr>
  <tr fruit><td>4</td><td>みかん</td><td>398円</td></tr>
  <tr vegetable><td>5</td><td>キャベツ</td><td>198円</td></tr>
  <tr meat><td>6</td><td>牛肉</td><td>560円</td></tr>
  <tr meat><td>7</td><td>豚肉</td><td>318円</td></tr>
  <tr vegetable fruit><td>8</td><td>トマト</td><td>198円</td></tr>
</table>