javascript 基于 HTML 中的类显示/隐藏行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7355863/
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
Show/hide rows based on class in HTML
提问by Ozzah
Imagine I have a table of data in HTML and each of the rows have, say, one of three possible classes: RowA, RowB, and RowC; which represent the information in the rows. (For example, Small, Medium, and Large cars).
想象一下，我有一个 HTML 数据表，每一行都有，比如说，三个可能的类之一：RowA、RowB 和 RowC；代表行中的信息。（例如，小型、中型和大型汽车）。
Above the table, I have 3 checkboxes: "Show Small Cars", "Show Medium Cars", "Show Large Cars".
在表格上方，我有 3 个复选框：“显示小型汽车”、“显示中型汽车”、“显示大型汽车”。
If the user deselects "Show Small Cars", then the rows containing small cars should disappear.
如果用户取消选择“显示小型汽车”，则包含小型汽车的行应该消失。
This is how I would do it:
这就是我将如何做到的：
function showHideRows(classToShowOrHide, checkBoxSender)
{
var tableObj = document.getElementById("myDataTable");
for (i = 0; i < tableObj.childNodes.length; i++)
if (tableObj.childNodes[i].className == classToShowOrHide)
tableObj.childNodes[i].style.display = checkBoxSender.checked ? "visible" : "none";
}
Is there a better way? For example, can I modify the css class using javascript to include/exclude a display: none?
有没有更好的办法？例如，我可以使用 javascript 修改 css 类以包含/排除display: none?
I'm not using jQuery.
我没有使用 jQuery。
回答by c-smile
If you define your markup/styles as this:
如果您将标记/样式定义为：
<table class="showSmallCars showMediumCars">
<tr class="smallCar">...<tr>
<tr class="mediumCar">...<tr>
</table>
CSS:
table tr { display:none; }
table.showSmallCars tr.smallCar { display:table-row; }
table.showMediumCars tr.mediumCar { display:table-row; }
then it is enough for you to modify class attribute on table to present records of groups you need:
Thus <table class="showSmallCars showMediumCars">will show smalls an mediums
and <table class="showSmallCars showMediumCars showLargeCars">will show all of them.
那么您只需修改表上的类属性以显示您需要的组的记录：因此<table class="showSmallCars showMediumCars">将显示小型和中型并<table class="showSmallCars showMediumCars showLargeCars">显示所有这些。
And no need to scan all rows in script.
并且无需扫描脚本中的所有行。
回答by Ben Hull
Really, the basics of showing and hiding rows can be done very cleanly in CSS. Javascript is only required to tell the surrounding table what type it should show - and that's just a matter of setting a class name.
确实，显示和隐藏行的基础知识可以在 CSS 中非常干净地完成。Javascript 只需要告诉周围的表它应该显示什么类型 - 这只是设置类名的问题。
If this is your HTML:
如果这是您的 HTML：
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Price</td>
</tr>
<tbody>
<tr class="rowA">
<td>Falcon</td>
<td>Large</td>
<td>0.00</td>
</tr>
<tr class="rowA">
<td>Commodore</td>
<td>Large</td>
<td>0.00</td>
</tr>
<tr class="rowB">
<td>Camry</td>
<td>Medium</td>
<td>0.00</td>
</tr>
<tr class="rowB">
<td>Lancer</td>
<td>Medium</td>
<td>5.00</td>
</tr>
<tr class="rowC">
<td>Prius</td>
<td>Small</td>
<td>.00</td>
</tr>
<tr class="rowC">
<td>Civic</td>
<td>Small</td>
<td>.00</td>
</tr>
</tbody>
</thead>
</table>
Use this CSS:
使用这个 CSS：
/* The rows to show */
table.showTypeA .rowA,
table.showTypeB .rowB,
table.showTypeC .rowC {
display: table-row;
}
/* Then, hide the other types */
table.showTypeA .rowB,
table.showTypeA .rowC,
table.showTypeB .rowA,
table.showTypeB .rowC,
table.showTypeC .rowA,
table.showTypeC .rowB {
display: none;
}
All you need to do with javascript is set a class on the table of 'showTypeA', 'showTypeB', 'showTypeC', and the browser will take care of the rest.
您只需在 'showTypeA'、'showTypeB'、'showTypeC' 表上设置一个 javascript 类，其余的将由浏览器处理。
回答by Joe
jQuery is a cleaner way to do it; go to http://www.jquery.comand follow the instructions there to start using it, then your function becaomse
jQuery 是一种更简洁的方法；转到http://www.jquery.com并按照那里的说明开始使用它，然后你的函数就变成了
function showHideRows(classToShowOrHide, checkBoxSender)
{
$('.' + classToShowOrHide, '#myDataTable').each(function(){
$(this).css('display', ((checkBoxSender.checked) ? 'visible' : 'none'));
});
}
If you want to do it in vanilla JS, something like this should be about right. Probably a gremlin in the following code somewhere, I don't do much vanilla JS any more :) jQuery is thatgood.
如果你想在 vanilla JS 中做到这一点，这样的事情应该是正确的。可能是以下代码中的某个地方的小鬼，我不再做太多 vanilla JS 了 :) jQuery 就是那么好。
window.onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
}
function showHideRows(classToShowOrHide, checkBoxSender)
{
for (i = 0; i < document.getElementsByClassName(classToShowOrHide); i++)
document.getElementsByClassName(classToShowOrHide)[i].style.display = checkBoxSender.checked ? "visible" : "none";
}
回答by Marco Johannesen
I know you asked for JavaScript, but you could do it failry easy with jQuery.
我知道您要求使用 JavaScript，但您可以使用 jQuery 轻松实现失败。
Like: http://jsfiddle.net/XJRVt/17/
喜欢：http: //jsfiddle.net/XJRVt/17/
You would proberbly also need to do a check on page load :)
您可能还需要检查页面加载:)
