javascript - 显示/隐藏具有特殊条件的行

Question

我有一个带有此标记的表格:

<table>
    <tr class="odd"><td>Product 1</td></tr>
    <tr class="even"><td>Product 2</td></tr>
    <tr class="odd"><td>Product 3</td></tr>
    <tr class="even"><td>Product 4</td></tr>       
</table>

每个表行都是一个产品，有些产品有更多信息。因此，在本例中，表格如下所示:

<table>
    <tr class="odd"><td>Product 1</td></tr>
    <tr class="even"><td>Product 2</td></tr>
    <tr class="even"><td>Information 1</td></tr>
    <tr class="even"><td>Information 2</td></tr>
    <tr class="odd"><td>Product 3</td></tr>
    <tr class="even"><td>Product 4</td></tr>       
</table>

我不想隐藏包含产品信息的行，并在单击产品行后显示它。

我使用以下 Javascript 函数和 onlick=""尝试了此操作:

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.visibility == 'hidden')    
        el.style.visibility = 'visible'; 
    else 
        el.style.visibility = 'hidden'; 
}

但问题是我不知道如何仅定位我点击的产品的信息行。如果我可以更改标记，那就很容易了，但是这个标记是生成的，所以我只能用 Javascript 来解决它。

这个问题有办法解决吗？我创建了一个 fiddle ，因此更容易提供快速解决方案:

http://jsfiddle.net/emjay__/8B3M4/

Answer 1

您好，为此我建议您使用 Jquery 解决方案: http://jsfiddle.net/8B3M4/9/

• 首先仅使用 CSS 隐藏所有元素:匹配以相同类名开头的所有元素。

  tr.even + .even {
   display:none;
  }
  tr.odd + .odd {
   display:none;
  }
  

• 第二个函数显示/隐藏元素:

  $(document).ready(function () {
    $('tr.even').click(function (){
      $(this).nextUntil('.odd').toggle();
    })
  })