使用 Javascript 类显示/隐藏表格行 [英] Show/Hide Table Rows using Javascript classes

问题描述

我有一个可以展开和折叠的表格，但是使用起来太乱了，而且 IE 和 Firefox 无法正常使用它.

I have a table that kind of expands and collapses, but it's getting too messy to use it and IE and Firefox are not working properly with it.

所以，这是 JavaScript 代码:

So, here's the JavaScript code:

  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:

And a Sample 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 使其工作.我认为如果我使用类而不是 ID 来确定隐藏的行会更好.

The problem is that I use one ID for each and every and that's very annoying because I want to have a lot of hidden rows for each parent and a lot of parents, so it would be too many IDs to handle. And IE and FireFox are only showing the first Hidden Row and not the others. I suspect this happens because I've made it work by triggering all IDs together. I think it would be better if I use Classes instead of IDs to indetify the hidden rows.

我对这一切都很陌生，所以请尝试以任何简单的方式解释它.我也尝试过 jQuery，但无法获得它.

I'm really new to all of this so please try and explaining it in any kind of simply way. Also I've tried jQuery but wasn't able to get it.

推荐答案

很难弄清楚您想用这个示例做什么，但实际上您在考虑使用类时走在正确的轨道上.我创建了一个 JSFiddle 来帮助演示一个稍微更好的方法(我希望)这样做.

It's difficult to figure out what you're trying to do with this sample but you're actually on the right track thinking about using classes. I've created a JSFiddle to help demonstrate a slightly better way (I hope) of doing this.

这是小提琴:link.

你所做的是，不是使用 ID，而是使用类.在您的代码示例中，有 Oranges 和 Apples.我把它们当作产品类别(因为我真的不知道你的目的是什么)，有自己的 id.所以，我用 class="cat1" 或 class="cat2" 标记产品 s.

What you do is, instead of working with IDs, you work with classes. In your code sample, there are Oranges and Apples. I treat them as product categories (as I don't really know what your purpose is), with their own ids. So, I mark the product <tr>s with class="cat1" or class="cat2".

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

I also mark the links with a simple .toggler class. It's not good practice to have onclick attributes on elements themselves. You should 'bind' the events on page load using JavaScript. I do this using jQuery.

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

使用这种格式，您将事件处理程序绑定到具有 toggler 类的链接的 click 事件.在我的代码中，我向 toggler 链接添加了一个 data-prod-cat 属性，以指定它们应该控制哪些产品行.(我使用 data-* 属性的原因在 here.您可以在 Google 上搜索html5 数据属性"以获取更多信息.)

With this format, you are binding an event handler to the click event of links with class toggler. In my code, I add a data-prod-cat attribute to the toggler links to specify which product rows they should control. (The reason for my using a data-* attribute is explained here. You can Google 'html5 data attributes' for more information.)

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

In the event handler, I do this:

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

使用这段代码，我实际上是在尝试创建一个像 $('.cat1') 这样的选择器，这样我就可以为特定的产品类别选择行，并更改它们的可见性.我使用 $(this).attr('data-prod-cat') this 来访问用户单击的链接的 data-prod-cat 属性.我使用 jQuery toggle 函数，这样我就不必编写像 if 这样的逻辑可见，然后隐藏元素，否则像在 JS 代码中那样使其可见.jQuery 处理这个问题.切换函数执行它所说的操作，并且toggles 指定元素的可见性.

With this code, I'm actually trying to create a selector like $('.cat1') so I can select rows for a specific product category, and change their visibility. I use $(this).attr('data-prod-cat') this to access the data-prod-cat attribute of the link the user clicks. I use the jQuery toggle function, so that I don't have to write logic like if visible, then hide element, else make it visible like you do in your JS code. jQuery deals with that. The toggle function does what it says and toggles the visibility of the specified element(s).

我希望这已经足够解释了.

I hope this was explanatory enough.

这篇关于使用 Javascript 类显示/隐藏表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！