我有一些从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表等等。
任何建议我都有一个脚本但只显示和隐藏年份。
答案 0 :(得分：1)
首先，更改您的定义并为您的表使用ID。在每个表上设置css以显示：none。 然后，为您的select使用事件处理程序，以便在更改时显示正确的表。 请参阅下面的代码。具体来说，请注意我在表上将类更改为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>
答案 1 :(得分：0)
在#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();
});
答案 2 :(得分：0)
在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
})
答案 3 :(得分：0)
要达到预期效果，请使用以下选项
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();
}
}
});
})