javascript - 根据 td 类的存在切换表行可见性

Question

如果 <td> 如何切换表中的多行class 设置为特定的类。例如，如果所有行包含 class="foo"，则切换所有行.

<table id="bar">
  <tr>
    <td>hello</td>
    <td class="foo">there</td>
    <td class="foo">bye</td>
  </tr>
</table>

Answer 1

这是专为您编写的非 jQuery 解决方案:http://phrogz.net/tmp/toggling_rows_with_class.html

这是相关的 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';
    }
  };
}


function findElementsWithClass(tagName, className) {
  if (document.querySelectorAll) {
    return document.querySelectorAll(tagName + "." + className);
  } else {
    var results = [];
    var all = document.getElementsByTagName(tagName);
    var regex = new Regexp("(?:^|\\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;
  }
}