使用Javascript类显示/隐藏表行

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来帮助演示一个稍微好一点的方法(我希望).

这是小提琴:链接.

你所做的不是使用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-*解释了使用属性的原因.您可以使用Google的'html5数据属性'获取更多信息.)

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

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

使用此代码,我实际上正在尝试创建一个选择器,$('.cat1')因此我可以为特定产品类别选择行,并更改其可见性.我用$(this).attr('data-prod-cat')它来访问data-prod-cat用户点击的链接的属性.我使用jQuery 切换功能,因此我不必if visible, then hide element, else make it visible像在JS代码中那样编写逻辑.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 有一个很好的显示和隐藏函数，可以封装您正在谈论的行为。这将使您不必编写新函数或跟踪 css 类。

$("tr1").show();

$("tr1").hide();

w3cSchool 链接到 JQuery 显示和隐藏