使用 Javascript 类显示/隐藏表行

很难弄清楚您要用此示例做什么，但实际上您在考虑使用类时走在正确的轨道上。我创建了一个 JSFiddle 来帮助演示一种稍微好一点的方法（我希望）。

这是小提琴：链接。

您所做的不是使用 ID，而是使用类。在代码示例中，有橙子和苹果。我将它们视为产品类别（因为我真的不知道您的目的是什么），并带有自己的ID。因此，我用class="cat1"或class="cat2"标记产品<tr> s。

我还用一个简单的.toggler类标记链接。对元素本身具有onclick属性不是很好的做法。您应该使用 JavaScript 在页面加载时"绑定"事件。我使用 jQuery 来做到这一点。

$(".toggler").click(function(e){
    // you handle the event here
});

使用此格式，可以将事件处理程序绑定到具有类 toggler 的链接的click事件。在我的代码中，我向toggler链接添加一个data-prod-cat属性，以指定它们应控制的产品行。（此处解释了我使用 data-* 属性的原因。你可以谷歌"html5数据属性"了解更多信息。

在事件处理程序中，我这样做：

$('.cat'+$(this).attr('data-prod-cat')).toggle();

使用此代码，我实际上正在尝试创建一个类似于$('.cat1')的选择器，以便我可以为特定产品类别选择行，并更改其可见性。我使用它来访问用户单击的链接的data-prod-cat属性$(this).attr('data-prod-cat')。我使用 jQuery 切换函数，这样我就不必像在 JS 代码中那样像if visible, then hide element, else make it visible那样编写逻辑。jQuery处理这个问题。切换函数按照它所说的去做，并toggle指定元素的可见性。

我希望这足以解释。

一种方法是将一个类放在"父"行上，并删除所有 id 和内联onclick属性：

<table id="products">
    <thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Destination</th>
        <th>Updated on</th>
    </tr>
    </thead>
    <tbody>
    <tr class="parent">
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    ...etc.
    </tbody>
</table>

然后有一些隐藏所有非父级的CSS：

tbody tr {
    display : none;          // default is hidden
}
tr.parent {
    display : table-row;     // parents are shown
}
tr.open {
    display : table-row;     // class to be given to "open" child rows
}

这大大简化了您的 html。请注意，我在标记中添加了<thead>和<tbody>，以便于隐藏数据行和忽略标题行。

使用jQuery，你可以简单地这样做：

// when an anchor in the table is clicked
$("#products").on("click","a",function(e) {
    // prevent default behaviour
    e.preventDefault();
    // find all the following TR elements up to the next "parent"
    // and toggle their "open" class
    $(this).closest("tr").nextUntil(".parent").toggleClass("open");
});

演示：http://jsfiddle.net/CBLWS/1/

或者，要在普通的JavaScript中实现类似的东西，也许如下所示：

document.getElementById("products").addEventListener("click", function(e) {
    // if clicked item is an anchor
    if (e.target.tagName === "A") {
        e.preventDefault();
        // get reference to anchor's parent TR
        var row = e.target.parentNode.parentNode;
        // loop through all of the following TRs until the next parent is found
        while ((row = nextTr(row)) && !/'bparent'b/.test(row.className))
            toggle_it(row);
    }
});
function nextTr(row) {
    // find next sibling that is an element (skip text nodes, etc.)
    while ((row = row.nextSibling) && row.nodeType != 1);
    return row;
}
function toggle_it(item){ 
     if (/'bopen'b/.test(item.className))       // if item already has the class
         item.className = item.className.replace(/'bopen'b/," "); // remove it
     else                                       // otherwise
         item.className += " open";             // add it
}

演示：http://jsfiddle.net/CBLWS/

无论哪种方式，都将 JavaScript 放在正文末尾的 <script> 元素中，以便在解析表后运行。

JQuery 10.1.2 有一个很好的显示和隐藏函数，可以封装你正在谈论的行为。这将节省您编写新函数或跟踪 css 类的麻烦。

$("tr1").show();
$("tr1").hide();

w3c学校链接到JQuery显示和隐藏

event.preventDefault()

并非在所有浏览器中都有效。相反，您可以在 OnClick 事件中返回 false。

onClick="toggle_it('tr1');toggle_it('tr2'); return false;">

不确定这是否是最好的方法，但我在IE，FF和Chrome中进行了测试，并且工作正常。

下面是我的脚本，它显示/隐藏ID为"agencyrow"的表格行。

<script type="text/javascript">
                        function showhiderow() {
                            if (document.getElementById("<%=RadioButton1.ClientID %>").checked == true) {
                                document.getElementById("agencyrow").style.display = '';
                            } else {
                                document.getElementById("agencyrow").style.display = 'none';
                            }

                        }
    </script> 

只需在单选按钮onClick事件时调用函数showhiderow()

AngularJS指令ng-show，ng-hide允许显示和隐藏一行：

   <tr ng-show="rw.isExpanded">
   </tr>

当 rw.isExpanded == true 时，一行将可见，在以下情况下隐藏一行rw.isExpanded == false.ng-hide执行相同的任务，但需要相反的条件。