Toggle Table Row Visibility Based On Presence Of Td Class

Question

How can I toggle multiple rows in a table if the class is set to an specific class. For instance toggle all rows if they contain the class='foo'.

Solution 1:

Here's a non-jQuery solution, written just for you: http://phrogz.net/tmp/toggling_rows_with_class.html

Here's the relevant JS:

window.onload = function() {
  var visible = true;
  document.getElementById('toggle').onclick = function() {
    visible = !visible;
    var tds = findElementsWithClass('td', 'foo');
    for (var i=0, len=tds.length; i<len; ++i) {
      tds[i].parentNode.style.display = visible ? '' : 'none';
    }
  };
}


functionfindElementsWithClass(tagName, className) {
  if (document.querySelectorAll) {
    returndocument.querySelectorAll(tagName + "." + className);
  } else {
    var results = [];
    var all = document.getElementsByTagName(tagName);
    var regex = newRegexp("(?:^|\\s)" + tagName + "(?:\\s|$)");
    for (var i=0, len=all.length; i<len; ++i) {
      if (regex.test(all[i].className)) {
        results.push(all[i]);
      }
    }
    return results;
  }
}

Solution 2:

Modify the class

Why is everyone using selectors? There is already a class attached to all the appropriate elements, so why not just modify the class?

This function will find the class of a given name, and set an attribute for that class. Be careful if you have multiple classes with coincident names in different stylesheets, because the function isn't!

functionchangeStyle(stylename,attribute,newvalue) {
  var cssRules = 'rules';
  if(document.styleSheets[0].cssRules) {
    cssRules = 'cssRules';
  }
  for(var sheetId=0; sheetId<document.styleSheets.length; sheetId++) {
    var sheet = document.styleSheets[sheetId];
    for(var ruleId=0; ruleId<sheet[cssRules].length; ruleId++) {
      var rule = sheet[cssRules][ruleId];
      if(rule.selectorText == "."+stylename) {
         rule.style.setProperty(attribute,newvalue,"");
      }
    }
  }
  returnfalse;
}

Now, just call

changeStyle('foo','display','none');

and the cells should disappear, then with 'block' to get them back (IE can't do the more recent display styles like ). I suspect that in a table you'll want to hide entire rows rather than just cells, but you can also make them disappear by setting visibility to hidden - they will still take up space, but not draw.

See, no jquery, no homemade element selectors. Just a slightly annoying bit of javascript to loop through the stylesheets and their rules...

Solution 3:

td = document.getElementsByTagName('td');
    for (var  i = 0; i < td.length; i++) {
        if (td[i].className === 'foo')
            if (!td[i].style.display)
                td[i].style.display = 'none';
            else    
                td[i].style.display = '';
    }
}

http://jsfiddle.net/qwertymk/cyZn9/2/

Solution 4:

Something like this should do it:

var trs = document.getElementsByTagName("tr");
for (var i in trs) {
    var tr = trs[i];
    if (tr.getElementsByClassName("foo").length > 0)
        tr.style.display = (tr.style.display == "none" ? "block" : "none");
}

This will toggle the display on any TR that contains a child with class="foo".

Solution 5:

Something like this?

$("table td.specific_class").toggle();

Edit

/* Go through the table rows */var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++ ) {
    var myClass, tds, line_done = false;
    /* Go through the table cells */
    tds = trs[i].getElementsByTagName("td");
    for ( var k = 0; k < tds.length; k++ ){
        /* Check each class of each cell */
        myClasses = tds[k].className.split(' ');
        for ( var j = 0; j < myClasses.length; j++ ){
            /* If the class corresponds we toggle the row and break until the next row */if ( myClasses[j].className == "foo" ){
                trs[i].style.display = trs[i].style.display == "none" ? "block" : "none";
                line_done = 1;
                break;
            }
        }
        if ( line_done ){
          break;
        }
    }
}

Html5 Guru