按日期显示和隐藏表

-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

按日期显示和隐藏表

回答

相关问题