按日期显示和隐藏表格
show and hide tables by Date
我有一些表格是按日期从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年的表格，依此类推
任何建议我有一个脚本，但这只显示和隐藏了一年。
首先，更改定义并为表使用id。将每个表上的css设置为显示：none。然后，为您的选择使用事件处理程序，以便在更改时显示正确的表。请参阅下面的代码。具体来说，请注意，我在表中将类更改为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>
在#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();
});
对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
要实现预期结果，请使用以下选项
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
相关文章：
- 当缺少正文时，隐藏表格
- 隐藏表格行
- 如果用户单击表格行，则显示或隐藏表格行(HTML/JQuery）
- 如何根据下拉列表中的选择隐藏表格行
- 如果选中复选框，则显示或隐藏表格行
- 无法使用Angular.js隐藏表格行的按钮
- 如果没有数据，如何隐藏表格并使用jQuery或JavaScript显示表单
- 使用 jquery 隐藏表格边框
- 如何隐藏表格部分并在单击后显示
- 隐藏表格的第二行和第三行
- 显示和隐藏表格的链接
- 如何在文本为空时隐藏表格单元格
- 使用jQuery显示/隐藏表格
- 如何使用Jquery数据表插件隐藏表格中的列
- JQuery搜索栏隐藏表格行
- 通过复选框隐藏表格
- 如何用jQuery选择隐藏表格中的行
- Javascript隐藏表格单元格按钮单击
- jQuery-隐藏表格->重新加载页面后，我的表显示了几秒钟
- 通过js或jQuery按需显示/隐藏表格数据
