Question

显示具有特定类的行。使用jquery是一项简单的任务。我刚刚开始研究javascript概念。我无法通过添加课程来显示它。这是我的代码。

$("#tblAllMessages tbody tr").each(function () {
    if ($(this).hasClass('active')) {
        $(this).show();
    } else {
        $(this).hide();
    }
});

我写的javascript中的相同内容是..但是，它不起作用。我只需要检查具有该类的tr并显示它们。

for (var i = 0, row; row = table.rows[i]; i++) {
if(rows.className == 'active') {
     table.rows[i].style.display = 'block';
} else {
    table.rows[i].style.display = 'none';
}

它没有用。我正朝着正确的方向前进吗？

Answer 1

你的for循环真的很混乱，我会做这样的事情： -

var rows=document.getElementsByTagName("tr");

for(var i=0;i<rows.length;i++){

if(rows[i].className == 'active') {
     rows[i].style.display = 'inline';
} else {
    rows[i].style.display='none';
}

}

Answer 2

此代码段与您的代码段类似，但适用于包含多个类的TR个代码：

for( var i = 0; i < table.rows.length; i++ ){
    if( table.rows[i].className.indexOf('active') > -1 ){
         table.rows[i].style.display = 'table-row';
    } else {
        table.rows[i].style.display = 'none';
    }
}

如果有类似is-not-active的类，它也会显示该行。如果您打算使用IE10 +支持，则可以改为使用classList：

row.classList.contains('active')

如果没有，并且您希望它更加健壮，split向上className空格并检查结果数组是否包含您的类。

你可以用CSS实现同样的目的：

#tblAllMessages tbody tr {
  display: none;
}
#tblAllMessages tbody tr.active {
  display: table-row;
}

Answer 3

试试这个CSS

<强> CSS

#tblAllMessages tbody tr{
display: none;
}

#tblAllMessages tbody tr.active{
display: table-row;
}

仅显示使用javascript创建类的行

3 个答案: