Question

想象一下，我在HTML中有一个数据表，每个行都有三个可能的类之一：RowA，RowB和RowC;它代表行中的信息。（例如，小型，中型和大型车）。

在桌子上方，我有3个复选框：“Show Small Cars”，“Show Medium Cars”，“Show Large Cars”。

如果用户取消选择“显示小型汽车”，则包含小型汽车的行将消失。

我就是这样做的：

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";
}

有更好的方法吗？例如，我可以使用javascript修改css类来包含/排除display: none吗？

我没有使用jQuery。

Answer 1

如果您将标记/样式定义为：

<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; }

然后，您可以修改表上的类属性以显示所需组的记录：因此<table class="showSmallCars showMediumCars">将显示小的媒介并且<table class="showSmallCars showMediumCars showLargeCars">将显示所有这些内容。

无需扫描脚本中的所有行。

Answer 2

jQuery是一种更简洁的方法;转到http://www.jquery.com并按照那里的说明开始使用它，然后你的功能就是

function showHideRows(classToShowOrHide, checkBoxSender)
{
    $('.' + classToShowOrHide, '#myDataTable').each(function(){
        $(this).css('display', ((checkBoxSender.checked) ? 'visible' : 'none'));
    });
}

如果你想在vanilla JS中做到这一点，这样的话应该是正确的。可能是以下代码中的一个gremlin，我不再做很多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";
}

Answer 3

实际上，显示和隐藏行的基础知识可以在CSS中非常干净地完成。 Javascript只需要告诉周围的表它应该显示什么类型 - 这只是设置类名的问题。

如果这是您的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>$160.00</td>
            </tr>
            <tr class="rowA">
                <td>Commodore</td>
                <td>Large</td>
                <td>$160.00</td>
            </tr>
            <tr class="rowB">
                <td>Camry</td>
                <td>Medium</td>
                <td>$110.00</td>
            </tr>
            <tr class="rowB">
                <td>Lancer</td>
                <td>Medium</td>
                <td>$105.00</td>
            </tr>
            <tr class="rowC">
                <td>Prius</td>
                <td>Small</td>
                <td>$75.00</td>
            </tr>
            <tr class="rowC">
                <td>Civic</td>
                <td>Small</td>
                <td>$80.00</td>
            </tr>
        </tbody>
    </thead>
</table>

使用此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; 
}

你需要用javascript做的就是在'showTypeA'，'showTypeB'，'showTypeC'的表格上设置一个类，浏览器将负责其余的工作。

Answer 4

我知道你问过JavaScript，但你可以用jQuery轻松完成。

像： http://jsfiddle.net/XJRVt/17/

您可能还需要检查页面加载：）

在HTML中基于类显示/隐藏行

4 个答案: