日付でテーブルを表示/非表示

-2

2016年から2003年までの日付順のテーブルがあります日付でテーブルを表示/非表示

これらのテーブルを日付別に表示および非表示にする方法を考えようとしています。

 <select id="Years"> 
      <option value="y2016">2016</option> 
      <option value="y2015">2015</option> 
      <option value="y2014">2014</option> 
     </select> 

<div class="TableView"> 
      <table class="y2016" width="100%"> 
       <thead> 
        <tr> 
         <th height="23">Date</th> 
         <th height="23">Subject</th> 
         <th height="23">Description</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>06/14/16</td> 
         <td>Cost Management Report as of 6/14/2016</td> 
         <td>June <a href="">Cost Management Report</a></td> 
        </tr> 
        <tr> 
         <td>03/10/16</td> 
         <td>Cost Management Report as of 3/10/2016</td> 
         <td>March <a href="" target="_blank">Report </a></td> 
        </tr> 
        <tr> 
         <td>05/21/15</td> 
         <td>April - Cost Management Report</td> 
         <td>April <a href="" target="_blank">Report</a></td> 
        </tr> 
        <tr> 
         <td>04/06/15</td> 
         <td>March - Cost Management Report</td> 
         <td>March <a href="" target="_blank">Report</a></td> 
        </tr> 
        <tr> 
         <td>02/06/15</td> 
         <td>January - Cost Management Report</td> 
         <td>January <a href="" target="_blank">Report</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

div class="Tables"> 
      <table class="y2015" width="100%"> 
       <thead> 
        <tr> 
         <th height="23">Date</th> 
         <th height="23">Subject</th> 
         <th height="23">Description</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>05/21/15</td> 
         <td>April - Cost Management Report</td> 
         <td>April <a href="" target="_blank">Report</a></td> 
        </tr> 
        <tr> 
         <td>04/06/15</td> 
         <td>March - Cost Management Report</td> 
         <td>March <a href="" target="_blank">Report</a></td> 
        </tr> 
        <tr> 
         <td>02/06/15</td> 
         <td>January - Cost Management Report</td> 
         <td>January <a href="" target="_blank"> Report</a></td> 
        </tr> 
        <tr> 
         <td>10/31/14</td> 
         <td>Response to Notice of Violation</td> 
         <td><a href="">report</td> 
        </tr> 
        <tr> 
         <td>10/31/14</td> 
         <td>October - Cost Management Report</td> 
         <td>October <a href="http://www.dpw.co.santa-cruz.ca.us/Sanitation/CSA7CMR103114.pdf" target="_blank">Cost Management Report</a></td> 
        </tr> 
       </tbody> 
      </table>

そうy2016はその後、私はy2015を選択しますし、それはように2015のテーブルを表示します表示されます。

私はスクリプトを持っていましたが、それは1年だけ表示され、非表示になっていました。（あなたはjQueryを使ってそれをタグ付けされているためにjQueryを使用して）#Yearsに変更リスナーを設定し

出典

2016-07-26 Daniel Rubio

をあなたがあなたのテーブルを持っているHTMLやCSSを提供することはできますか？ – Josh

今はCSSがありませんが、私はCSSを使ってディスプレイなしをしていると思っていたのですが、 –

まず、テーブルの定義とIDを変更します。表示する各テーブルにcssを設定します。次に、選択したイベントハンドラを使用して、変更時に正しいテーブルが表示されるようにします。下記のコードを参照してください。具体的には、テーブルのidをクラスに変更して、ページの下部に書かれた小さなjavascript関数を見てください。ああ、選択肢にオプションを追加して、ユーザーが年を選択する必要があるようにしました。

</style> 

    </head> 
    <body> 
<select id="Years"> 
<option>Select Year</option> 
     <option value="y2016">2016</option> 
     <option value="y2015">2015</option> 
     <option value="y2014">2014</option> 
    </select> 

<div class="Tables"> 
     <table id="y2016" width="100%" style = 'display:none;'> 
      <thead> 
       <tr> 
        <th height="23">Date</th> 
        <th height="23">Subject</th> 
        <th height="23">Description</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>06/14/16</td> 
        <td>Cost Management Report as of 6/14/2016</td> 
        <td>June <a href="">Cost Management Report</a></td> 
       </tr> 
       <tr> 
        <td>03/10/16</td> 
        <td>Cost Management Report as of 3/10/2016</td> 
        <td>March <a href="" target="_blank">Report </a></td> 
       </tr> 
       <tr> 
        <td>05/21/15</td> 
        <td>April - Cost Management Report</td> 
        <td>April <a href="" target="_blank">Report</a></td> 
       </tr> 
       <tr> 
        <td>04/06/15</td> 
        <td>March - Cost Management Report</td> 
        <td>March <a href="" target="_blank">Report</a></td> 
       </tr> 
       <tr> 
        <td>02/06/15</td> 
        <td>January - Cost Management Report</td> 
        <td>January <a href="" target="_blank">Report</a></td> 
       </tr> 
      </tbody> 
     </table> 


     <table id="y2015" width="100%" style = 'display:none;'> 
      <thead> 
       <tr> 
        <th height="23">Date</th> 
        <th height="23">Subject</th> 
        <th height="23">Description</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>05/21/15</td> 
        <td>April - Cost Management Report</td> 
        <td>April <a href="" target="_blank">Report</a></td> 
       </tr> 
       <tr> 
        <td>04/06/15</td> 
        <td>March - Cost Management Report</td> 
        <td>March <a href="" target="_blank">Report</a></td> 
       </tr> 
       <tr> 
        <td>02/06/15</td> 
        <td>January - Cost Management Report</td> 
        <td>January <a href="" target="_blank"> Report</a></td> 
       </tr> 
       <tr> 
        <td>10/31/14</td> 
        <td>Response to Notice of Violation</td> 
        <td><a href="">report</td> 
       </tr> 
       <tr> 
        <td>10/31/14</td> 
        <td>October - Cost Management Report</td> 
        <td>October <a href="http://www.dpw.co.santa-cruz.ca.us/Sanitation/CSA7CMR103114.pdf" target="_blank">Cost Management Report</a></td> 
       </tr> 
      </tbody> 
     </table> 
       <script> 
    $("#Years").on('change', function(){ 
    var tbl = $("#Years option:selected").val(); 
    $("#" + tbl).show(); 
    }) 
    </script> 
     </body> 
     </html>

出典

2016-07-26 16:15:00 trouble706

：

$('#Years').change(function(){ 
    // Hide all tables 
    $('table').hide(); 
    // Get the current value of #Years 
    var val = $(this).val(); 
    // Show the correct table 
    $('.' + val).show(); 
});

出典

2016-07-26 15:53:33

HTMLでいくつかの微小な変化を確認します。代わりに、テーブルにクラスを追加するのでは、各テーブルの親div

HTML

<div class="TableView y2016"> // add y2016 class to here 
    <table class="" width="100%"> 
    // Rest of code 
    </table> 
</div> 

<div class="TableView y2015"> // add y2015 class to her 
    <table class="" width="100%"> 
    //Rest of code 
    </tbody> 
    </table>

CSS

.TableView { // will hide all tables 
    display: none 
} 
.y2016{ // will show only table.y2016 since y2016 is default selected 
    display:block; 
}

に追加JS

$("#Years").on('change',function(event){ 
// get value of selected option 
var _getSelected =$("#Years option:selected").val(); 
$('.TableView').css('display','none'); // hide all other tables 
$('.'+_getSelected).css('display','block'); // only show selected table 
})

JSFIDDLE

出典

2016-07-26 16:09:57 brk

オプションの下

JS期待される結果の使用を達成するために：

$('#Years').on('change', function() { 
    var year = $(this).val(); 
    var yearVal = year.substring(3); 

    $("tr").each(function() { 
    $this = $(this) 
    var value = $this.find("td:first").html(); 
    if (value) { 
     var selVal = value.slice(-2); 
     if (selVal === yearVal) { 
     $(this).show(); 
     } else { 
     $(this).hide(); 
     } 
    } 
    }); 
})

http://codepen.io/nagasai/pen/yJEYgq

出典

2016-07-26 16:26:39

日付でテーブルを表示/非表示

答えて

関連する問題