按日期顯示和隱藏表

-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表格等等。

任何建議我有一個腳本，但只顯示和隱藏只有一年。

來源

2016-07-26 Daniel Rubio

你能爲你的表格的HTML和CSS你有嗎？ – Josh

目前沒有CSS，但我想做一個顯示沒有CSS或只是有jQuery處理 –

首先，更改您的定義並使用您的表的ID。將每個表上的CSS設置爲顯示：無。然後，爲您的選擇使用事件處理程序，以便在更改時顯示正確的表。請參閱下面的代碼。具體來說，請注意我將類更改爲表中的id，然後查看我在頁面底部編寫的小javascript函數。哦，而且我在Select中添加了一個選項，以便用戶必須選擇年份。

</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（因爲你用jQuery標記它使用jQuery）：

$('#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一些細微變化。而不是添加類表中把它添加到父每個表

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; 
}

的div 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

按日期顯示和隱藏表

回答

相關問題