使用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()
      }    
  } 

并且a示例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来隐藏隐藏的行会更好。

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.

这是小提琴：链接。

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

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 的链接事件。在我的代码中，我在 toggler 链接中添加了一个 data-prod-cat 属性，以指定它们应该包含哪些产品行控制。 （我使用数据 - * 属性的原因解释为这里。您可以使用Googlehtml5数据属性获取更多信息。）

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'）来访问 data-prod-cat 用户点击的链接的属性。我使用jQuery 切换功能，这样我就不必写像<$ c $这样的逻辑c>如果可见，则隐藏元素，否则使其可见就像在JS代码中一样。 jQuery处理它。切换功能执行它所说的并且切换 s指定元素的可见性。

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

我希望这足够解释。

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