使用 Javascript 显示/隐藏表格行 - 可以使用 ID - 如何使用类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17518035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing/Hiding Table Rows with Javascript - can do with ID - how to do with Class?
提问by WilliamAlexander
I have a table which lists merchandise in a Guitar Store - each row contains one piece of merchandise. Each row (and each piece of merchandise) is either New, Used or on Consignment. I'd like for a user to be able to click a link in a sidebar UL (clicking on either New, Used, or Cons) and have only the table rows of that corresponding condition remain visible. So if a user clicked "Used" then all New and Cons rows would become hidden.
我有一张表格，其中列出了吉他商店中的商品 - 每行包含一件商品。每一行（和每件商品）都是新的、二手的或寄售的。我希望用户能够单击侧边栏 UL 中的链接（单击“新建”、“使用”或“缺点”），并且只有相应条件的表格行保持可见。因此，如果用户单击“已使用”，则所有 New 和 Cons 行都将隐藏。
I have made this work with some simple JavaScript, but it uses getElementByIDwhich won't work for me because I need to identify the TRs with classes. So that's where I get stumped. I'm not sure how to make this work with classes.
我已经用一些简单的 JavaScript 完成了这项工作，但它使用了getElementByID这对我不起作用，因为我需要用类来识别 TR。所以这就是我被难住的地方。我不知道如何使这个工作与类。
Here's the solution I've worked out so far:
这是我迄今为止制定的解决方案：
<html>
<head>
<script>
function used() {
document.getElementById("new").style.display = 'none';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = '';
}
function news() {
document.getElementByClass("new").style.display = '';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = 'none';
}
function cons() {
document.getElementByClass("new").style.display = 'none';
document.getElementById("cons").style.display = '';
document.getElementById("used").style.display = 'none';
}
</script>
</head>
<body>
<span onClick="used();">Used</span><br />
<span onClick="news();">New</span><br />
<span onClick="cons();">Cons</span><br /><br />
<table border="1">
<tr id="used">
<td>Used</td>
</tr>
<tr id="new">
<td>New</td>
</tr>
<tr id="cons">
<td>Cons</td>
</tr>
</table>
</body>
</html>
The above code works ok, and if I could get it to work with classes instead it would solve my immediate need. However, ultimately I'd like to scale this up to use for Brands as well - so that a user could click on a brand and see only the posts for that brand. In that situation I might have 20 or 30 brands in the table, so the above would not be ideal. Also this will ultimately live in a Wordpress site, and I would ideally be creating the classes for each brand from meta data in wordpress and similarly creating a dynamic UL containing the brands that toggle the table, as well as having a js solution that can work with a changing set of variables! So I know that what I have above is not the best approach, but it's the only one I know enough to try right now.
上面的代码工作正常，如果我可以让它与类一起工作，它将解决我的紧迫需求。但是，最终我想将其扩展到品牌也可以使用 - 以便用户可以单击品牌并仅查看该品牌的帖子。在那种情况下，我的表中可能有 20 或 30 个品牌，因此上述情况并不理想。此外，这最终将存在于 Wordpress 站点中，理想情况下，我会根据 wordpress 中的元数据为每个品牌创建类，并类似地创建一个动态 UL，其中包含切换表的品牌，以及一个可以工作的 js 解决方案随着一组不断变化的变量！所以我知道我上面的方法不是最好的方法，但这是我现在唯一知道的可以尝试的方法。
Help with the above would be most appreciated - as would advice about how I might do this more effectively as I move towards the more challenging Brands aspect.
对上述方面的帮助将不胜感激 - 当我转向更具挑战性的品牌方面时，我将如何更有效地做到这一点。
EDIT:
编辑：
Google helped me out, and I have a new direction - this might solve my problem:
谷歌帮助了我，我有了一个新的方向——这可能会解决我的问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
<ul class="side-nav">
<li><a class="cond" href="#">Show all</a></li>
<li><a class="used" href="#">Used</a></li>
<li><a class="new" href="#">New</a></li>
<li><a class="cons" href="#">Cons</a></li>
</ul>
<table>
<tr class="cond used">
<td>A Used Item</td>
<td>Used.</td>
</tr>
<tr class="cond new">
<td>A New Item</td>
<td>New</td>
</tr>
<tr class="cond cons">
<td>A Cons Item</td>
<td>Cons</td>
</tr>
</table>
<script>
$(function()
{
$('ul.side-nav a').click(function()
{
$('tr.cond').hide();
$('tr.' + $(this).attr('class')).show();
});
});
</script>
</body>
</html>
回答by OneOfOne
document.getElementsByClassNamereturns a NodeList, not a single element, I'd recommend either using jQuery, since you'd only have to use something like $('.new').toggle()
document.getElementsByClassName返回一个NodeList，而不是单个元素，我建议要么使用 jQuery，因为你只需要使用类似的东西$('.new').toggle()
or if you want plain JS try :
或者如果你想要普通的 JS 尝试：
function toggle_by_class(cls, on) {
var lst = document.getElementsByClassName(cls);
for(var i = 0; i < lst.length; ++i) {
lst[i].style.display = on ? '' : 'none';
}
}
回答by spartikus
JQuery 10.1.2 has a nice show and hide functions that encapsulate the behavior you are talking about. This would save you having to write a new function or keep track of css classes.
JQuery 10.1.2 有一个很好的显示和隐藏函数，可以封装您正在谈论的行为。这将使您不必编写新函数或跟踪 css 类。
$("new").show();
$("new").hide();
回答by Ilya Streltsyn
You can change the class of the entire table and use the cascade in the CSS: http://jsbin.com/oyunuy/1/
您可以更改整个表的类并在 CSS 中使用级联：http: //jsbin.com/oyunuy/1/
