这个问题在这里已有答案：
Jquery显示/隐藏表行 3个答案对于某项任务，我需要帮助我的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> [...]This question already has an answer here:
Jquery show/hide table rows 3 answersI need a little bit help with my HTML/CSS and JavaScript for a certain task. So, let's say I have built a website and I have a accumulated a bunch of blog posts that I listed in a table with links to the complete articles. Now, I want to filter by category. E.g., that only articles that were written in 2013 are displayed when I click a "2013" button.
Right now, I am doing it the "dumb" way, where I create a separate HTML file for every category. But I thought that there might be a cleverer way to not generate separate HTML files, but via tagging table rows and only displaying certain ones upon a "click" event.
Any ideas how I could do this?
Below is an example screenshot to explain the issue more visually, and below the image is some example HTML code of how my blog table is currently formatted.
I really appreciate any sort of idea and suggestion!
<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/
This will filter out any records that are not equal to a given publish year.
Adding the following HTML above your table:
<a href="#" onclick="javascript:filterArticles('2014');">2014</a> | <a href="#" onclick="javascript:filterArticles('2013');">2013</a> | <a href="#" onclick="javascript:filterArticles('2012');">2012</a>Then adding the following javascript to your page will yield filtered rows as you request.
function filterArticles(yearFilter){ $(".table_blog div[class='date']").each(function(){ if ($(this).text() == yearFilter){ $(this).closest("tr").show(); } else { $(this).closest("tr").hide(); } }); }Please see this working jsFiddle: http://jsfiddle.net/YmApX/2/
更多推荐
发布评论