Question

我有一个扩展和折叠的表格，但是使用它时太乱了，IE和Firefox无法正常使用它。

所以，这是JavaScript代码：

  function toggle_it(itemID){ 
      // Toggle visibility between none and '' 
      if ((document.getElementById(itemID).style.display == 'none')) { 
            document.getElementById(itemID).style.display = '' 
            event.preventDefault()
      } else { 
            document.getElementById(itemID).style.display = 'none'; 
            event.preventDefault()
      }    
  }

示例HTML：

<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Destination</td>
        <td>Updated on</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr1');toggle_it('tr2')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr1" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr2" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr3');toggle_it('tr4')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr3" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr4" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
</table>

问题是我每个人都使用一个ID而且非常烦人，因为我希望每个父级和很多父级都有很多隐藏的行，所以要处理的ID太多了。 IE和FireFox只显示第一个隐藏行而不显示其他隐藏行。我怀疑这是因为我通过一起触发所有ID来使其工作。我认为如果我使用Classes而不是ID来隐藏隐藏的行会更好。

我对这一切都很陌生，所以请尝试以任何一种简单的方式解释它。我也试过jQuery但是没能得到它。

Answer 1

很难弄清楚你试图用这个样本做什么，但实际上你正在考虑使用类。我创建了一个JSFiddle来帮助演示一种稍微好一点的方法（我希望）。

这是小提琴：link。

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

我还用简单的.toggler类来标记链接。在元素本身上拥有onclick属性并不是一种好习惯。您应该使用JavaScript在页面加载上“绑定”事件。我是用jQuery做的。

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

使用此格式，您将事件处理程序绑定到类click的链接的toggler事件。在我的代码中，我向data-prod-cat链接添加了toggler属性，以指定应控制哪些产品行。（我使用data-*属性的原因解释为here。您可以使用Google的'html5数据属性'获取更多信息。）

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

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

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

我希望这足够解释。

Answer 2

一种方法是将一个类放在“父”行上并删除所有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>元素中，以便在解析完表后运行它。

Answer 3

JQuery 10.1.2有一个很好的show和hide函数，它们封装了你所谈论的行为。这将节省您必须编写新函数或跟踪css类。

$("tr1").show();

$("tr1").hide();

w3cSchool link to JQuery show and hide

Answer 4

event.preventDefault()

不适用于所有浏览器。相反，您可以在OnClick事件中返回false。

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

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

Answer 5

下面是我的脚本，显示/隐藏带有ID＆＃34; agencyrow＆＃34;的表格行。

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

只需在radiobutton showhiderow()事件

上调用函数onClick即可

Answer 6

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

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

当rw.isExpanded == true并且隐藏时，行将可见 rw.isExpanded == false。 ng-hide执行相同的任务但需要反向条件。

使用Javascript类显示/隐藏表行

6 个答案: