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

时间:2013-12-04 14:12:13

标签: javascript html

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

<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解决它。

有可能解决这个问题吗?我创造了一个小提琴,所以提供快速解决方案更容易:

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

4 个答案:

答案 0 :(得分:4)

大家好,我建议你使用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();
      })
    })
    

答案 1 :(得分:2)

首先,您正在使用课程并选择ID。

另一方面,我会使用显示属性。

if( el && el.style.visibility == 'hidden')    
    el.style.display = 'block'; 
else 
    el.style.display = 'none'; 

在第三只看不见的手上,你仍然需要做很多工作才能让它运转起来。

答案 2 :(得分:2)

纯JS方法:

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

    var current_class = 'odd';
    var current_index = 0;
    var pairs = [];
    // Loop through each td
    var table = document.getElementsByTagName('table')[0];
    for (var i = 0; i < table.rows.length; i++) {
        var row = table.rows[i];
        // Pair the products with their information based on the class
        if (row.getAttribute('class') !== current_class) {
            current_index++;
            current_class = row.getAttribute('class');
        }
        // Set up the pairing
        if (pairs[current_index] === undefined) {
            // A new pair in sights
            pairs[current_index] = {
                'product': row.cells[0],
                'info': []
            }
            row.cells[0].onclick = function(ci) {
                return function() {
                    for (var j = 0; j < pairs[ci].info.length; j++) {
                        var cell = pairs[ci].info[j];
                        if (cell.style.display == 'none') {
                            cell.style.display = '';
                        }
                        else {
                            cell.style.display = 'none';
                        }
                    }
                }
            }(current_index);
        }
        else {
            // Add more info to the object
            pairs[current_index].info.push(row.cells[0]);
            console.log(row.cells[0].style.display);
            row.cells[0].style.display = 'none';
        }
    }

答案 3 :(得分:1)

这是有效的(s。http://jsfiddle.net/S7gTA/3/

var lastClass = 0; 
var lastIndex = 0;
$('tr').each(function(index, element){ // get each tr on the page, change the selector to #%TABLEID% > tr if this should work only for a specific table

  if($(this).attr("class") != lastClass) // class change from odd to even or even to odd?
  {
   lastClass = $(this).attr("class"); // set current "mother" class
   lastIndex = index; // store the index of the "mother"
   $(this).addClass("mother").attr("rel", index) // now the mother is able to hide or show all the element with the class info-for-%index% *1
  }
  else
  {
    $(this).addClass("info-for-"+lastIndex).hide(); 
  }

});

$( '.mother' ).bind("click", function(){ $('.info-for-'+$(this).attr("rel")).toggle();  });