修改

Question

如果将<td>类设置为特定类，如何在表中切换多行。例如，如果所有行包含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;
  }
}

Answer 2

修改班级

为什么每个人都使用选择器？已经有一个类附加到所有适当的元素，所以为什么不修改类？

此函数将查找给定名称的类，并为该类设置属性。如果在不同的样式表中有多个具有重合名称的类，请小心，因为该函数不是！

function changeStyle(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,"");
      }
    }
  }
  return false;
}

现在，请致电

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

并且单元格应该消失，然后使用'block'将它们取回（IE不能执行更新的显示样式）。我怀疑在一个表中你会想要隐藏整行而不仅仅是单元格，但你也可以通过将visibility设置为hidden来使它们消失 - 它们仍会占用空间，但不会占用

看，没有jquery，没有自制元素选择器。只是有点烦人的javascript来循环遍历样式表及其规则...

Answer 3

这样的东西？

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

修改

/* 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;
        }
    }
}

Answer 4

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/

Answer 5

这样的事情应该这样做：

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");
}

这将切换包含class =“foo”的孩子的任何TR的显示。

Answer 6

尝试这个

<html>
<head>
    <title>test</title>
    <script type="text/javascript">
    var toggle = function (action) {
        var trs = document.getElementById('bar').getElementsByTagName('tr'),
            trs_count = trs.length,
            needed = [],
            total = 0,
            pattern = /\bfoo\b/g,
            initial= 'show';

        for (i=0; i<trs_count; i++) {
            var tds = trs[i].getElementsByTagName('td'),
                tds_count = tds.length;

            for (j=0; j<tds_count; j++) {
                if (pattern.exec(tds[j].className)) {
                    needed.push(tds[j]);
                    total++;
                }
            }
        }

        toggle = function (action) {
            if (this.display == null) {
                this.display = initial;
            }

            if (action == null) {
                this.display = (this.display == 'hide') ? 'show' : 'hide';
            }
            else {
                this.display = action;
            }
            for (i=0; i<total; i++) {
                if (this.display == 'show') {
                    needed[i].style.display = 'block';
                }
                else {
                    needed[i].style.display = 'none';
                }
            }
            return true;
        }

        return toggle();
    }


    </script>
</head>
<body>

<table id="bar">
    <tr><th>Header</th></tr>
    <tr><td class="foo">1 Data foo</td></tr>
    <tr><td>2 Data</td></tr>
    <tr><td class="foo">3 Data foo</td></tr>
    <tr><td>4 Data</td></tr>
</table>

<button type="button" onclick="toggle()">toggle</button>
</body>
</html>

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

6 个答案:

修改班级

修改