堆棧內存溢出
  簡體   English   中英

根據td類的存在切換表行可見性

[英]Toggle table row visibility based on presence of td class

 原文  2011-01-04 14:25:11  8   6    javascript/ html/ css

問題描述

如果<td>類設置為特定類，如何在表中切換多行。 例如，如果它們包含class="foo"則切換所有行。 

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

6 個解決方案

解決方案1
 2  2011-01-04 14:40:18

這是一個非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;
  }
}

解決方案2
 2  2011-01-04 16:04:33

修改類

為什么每個人都使用選擇器？ 已經有一個類附加到所有適當的元素，所以為什么不修改類？

此函數將查找給定名稱的類，並為該類設置屬性。 如果在不同的樣式表中有多個具有重合名稱的類，請小心，因為該功能不是！ 

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不能做更近期的顯示樣式）。 我懷疑在一個表中你會想要隱藏整行而不僅僅是單元格，但你也可以通過設置hidden visibility來使它們消失 - 它們仍會占用空間，但不會占用空間。

看，沒有jquery，沒有自制元素選擇器。 只是有點惱人的javascript來循環遍歷樣式表及其規則......

解決方案3
 0  2011-01-04 14:34:34

像這樣的東西？ 

$("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;
        }
    }
}

解決方案4
 0  2011-01-04 14:49:33

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/

解決方案5
 0  2011-01-04 14:51:08

這樣的事情應該這樣做： 

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上的顯示。

解決方案6
 0  2011-01-06 10:02:39

試試這個 

<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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 通過單擊td切換表格行 如何在其中切換輸入的可見性 <td> 單行標簽 單擊特定TD時的jQuery切換表行 根據ID切換MVC表行的可見性 如何切換div的顯示狀態而不是可見性 按班級切換可見性 根據包含的td屬性隱藏表格行 根據數據屬性和類切換部分可見性 根據復選框值切換 HTML 表行的可見性 撥動表 <td> 在.hta
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM