<分区>
标签 javascript jquery html css
<分区>
我的 HTML/CSS 和 JavaScript 需要一些帮助来完成某项任务。所以,假设我建立了一个网站,并且积累了一堆博客文章,我在表格中列出了这些文章,并附有指向完整文章的链接。现在,我想按类别过滤。例如,当我单击“2013”按钮时,只会显示 2013 年撰写的文章。
现在,我正在以“愚蠢”的方式进行操作,即为每个类别创建一个单独的 HTML 文件。但我认为可能有更聪明的方法不生成单独的 HTML 文件,而是通过标记表格行并仅在“点击”事件时显示某些行。
有什么想法可以做到这一点吗?
下面是一个示例屏幕截图,可以更直观地解释该问题,图片下方是一些示例 HTML 代码,说明我的博客表格当前的格式。
我非常感谢任何想法和建议!
<table class="table_blog">
<tr onclick="location.href='link_to_article.html'">
<td>
<img src="article_image" alt="">
</td>
<td>
<div class="header">Article title</div>
<div class="date">-- date article was written</div>
<div class="abstract">abstract for the article</div>
</td>
</tr>
<tr onclick="location.href='link_to_article.html'">
<td>
<img src="article_image" alt="">
</td>
<td>
<div class="header">Article title</div>
<div class="date">-- date article was written</div>
<div class="abstract">abstract for the article</div>
</td>
</tr>
<tr onclick="location.href='link_to_article.html'">
<td>
<img src="article_image" alt="">
</td>
<td>
<div class="header">Article title</div>
<div class="date">-- date article was written</div>
<div class="abstract">abstract for the article</div>
</td>
</tr>
[...]
最佳答案
这将过滤掉任何不等于给定发布年份的记录。
在表格上方添加以下 HTML:
<a href="#" onclick="javascript:filterArticles('2014');">2014</a> |
<a href="#" onclick="javascript:filterArticles('2013');">2013</a> |
<a href="#" onclick="javascript:filterArticles('2012');">2012</a>
然后将以下 javascript 添加到您的页面将根据您的要求生成过滤行。
function filterArticles(yearFilter){
$(".table_blog div[class='date']").each(function(){
if ($(this).text() == yearFilter){
$(this).closest("tr").show();
} else {
$(this).closest("tr").hide();
}
});
}
请看这个有效的 jsFiddle: http://jsfiddle.net/YmApX/2/
关于javascript - 有了 HTML 表格,如何使用 HTML、CSS 和 JavaScript 在仅显示特定行之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24617361/