文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Javascript隐藏HTML表元素时的意外行为

问使用Javascript隐藏HTML表元素时的意外行为
EN

Stack Overflow用户

提问于 2022-03-17 17:49:05

回答 1查看 76关注 0票数 2

当我使用Javascript隐藏HTML表的部分时，我观察到了一些奇怪的行为，这取决于我使用的浏览器。我已经在这个网站上访问了HTML。

https://auditrecordit.com/SO_demo/MSc.html

也包括在下面，但我认为该网站是方便地看到自己的行为非常快。

如您所见，该页面显示了学位结构。如果我在Firefox中选择“证书”切换，我就会得到预期的行为--第二学期消失了，第一学期的中间模块也会消失(第一学期的下一行的选择也会扩展)。

同样，在火狐中，如果我选择"MSc“切换，就会得到预期的反向行为--隐藏的表元素会再次出现。

然而，如果我选择“文凭”切换，不适用的表格元素中的文本会消失(好)，但是它们的背景颜色不会(坏)。

现在，这是超级奇怪的一点-如果我然后交换浏览器标签和回来一次(或切换应用程序和回来一次)，背景颜色得到固定，即它消失了！

事实上，我甚至不需要离开窗户。如果我打开Web控制台，我只需将鼠标指针移到窗口显示部分之外(甚至可以悬停在滚动条上)，背景颜色就会消失。

因此，我想当我这样做时会发生一些事件，这会促使Firefox进行某种迷你刷新。

考虑到这一点，我试着添加

window.self.blur();
window.self.focus();

对我的功能做最后的调整，但没有用。

更令人困惑的是，我上面描述的意外行为并不发生在Chrome中。Chrome错误并保持错误(即背景颜色在不应该存在的情况下仍然存在)。当然，很可能是我出了点问题，但我不知道是什么，火狐最终也照我的意思做了，所以我现在要怪Chrome了。

如果您检查Javascript，您将看到，每当我将类的可见性设置为“折叠”时，我都会尝试消除不必要的背景颜色，将类'tdNoBG‘分配给单元格，并且我可以通过检查器看到类已更改，但背景颜色仍然显示。

你知不知道什么事件会让火狐改变主意，还有任何解决Chrome问题的建议吗？

如果有人能证实他们遵守了我所描述的行为，P.S.很高兴！

    <!DOCTYPE html><html><head>
        <meta charset='utf-8' />  
        <style type='text/css'>
    body { font-family: Tahoma; }
    label {
        white-space:nowrap;
    }
    
    td { 
        padding: 20px;
    }
    td:nth-child(2), td:nth-child(7){text-align:center;}
    
    table { 
        border-spacing: 2px;
        border-collapse: separate;
      width: 100%;
    }
    
    .clsSemester { font-size: xx-large; background-color: blue; color: white; font-weight: bold;  width: 35%; }
    
    .tdThinDivider { background-color: white; width: 1%; }
    
    .clsVA { vertical-align: top; }
    
    .trBG { background-color: #e6ffff; }
    
    .tdNoBG { background-color: #ffffff; }
    
    .tdModuleTitle { background-color: powderblue; font-weight: bold; }
    
    .tdPathway  { background-color: #fafafa; }
    
    </style>
    
    <script type='text/javascript'>  
           
    function getModuleName(strModuleCode) {
        var arr = new Map([
        ['MPE5003','PE and Sport and the Social Sciences'],
        ['MPE5004','Cognitive Development and Pedagogy Through PE and Sport'],
        ['MPE5005','Psychology: Culture, Coaching and Young People'],
        ['MPE5006','Dissertation: Consultancy-based Project'],
        ['MPE5007','Dissertation: Academic Research Project'],
        ]);
        return arr.get(strModuleCode);
    }
    
    function setPathway() {
        var table = document.getElementById("tblMSc");
        for (var i = 0, row; row = table.rows[i]; i++) {
           for (var j = 0, cell; cell = row.cells[j]; j++) {
             cell.style.height = i == 0 ? '20px' : (i%2 == 0 ? '200px' : '2px');
           }  
        }
        var table = document.getElementById("tblMSc");
        for (var i = 0, row; row = table.rows[i]; i++) {
           row.style.visibility = document.querySelector('input[name="rdoPathway"]:checked').value == 'Certificate' && (i == 4 || i == 5) ? 'collapse' : 'visible' ;
           
           for (var j = 0, cell; cell = row.cells[j]; j++) {
             cell.style.height = i == 0 ? '20px' : (i%2 == 0 ? '200px' : '2px');
             var strPathway = document.querySelector('input[name="rdoPathway"]:checked').value;
             cell.style.visibility = strPathway == 'Certificate' && (j > 3 || i > 1 && j > 2) || strPathway == 'Diploma' && i > 2 && j > 2 ? 'collapse' : 'visible' ;
        //console.log(i + ';' + j + ';' + cell.style.visibility + '#');
        //console.log(i + ';' + j + '#');
           }  
        }
        window.self.blur();
        window.self.focus();
        /*
        for (var i = 0, row; row = table.rows[i]; i++) {
           for (var j = 0, cell; cell = row.cells[j]; j++) {
             cell.style.visibility = 'visible';
           }  
        }
        var strPathway = document.querySelector('input[name="rdoPathway"]:checked').value;
        if (strPathway != 'MSc') {
            var arrCellsToHide = strPathway == 'Diploma' ? ['r3c5','r3c6','r4c5','r4c6'] : ['r3c0','r3c1','r3c2','r3c3','r3c4','r3c5','r3c6','r4c0','r4c1','r4c2','r4c3','r4c4','r4c5','r4c6'];
            var arrayLength = arrCellsToHide.length;
            for (var i = 0; i < arrayLength; i++) {
              document.getElementById(arrCellsToHide[i]).style.visibility = 'collapse';
              document.getElementById(arrCellsToHide[i]).className = document.getElementById(arrCellsToHide[i]).style.visibility == 'collapse' ? 'tdNoBG' : 'tdBG';
            }
        }
        */
    }
    
    </script>
    
     </head>
    
    <body onload="document.getElementById('divSem1Choice').innerHTML = getModuleName(document.querySelector('input[name=&quot;rdoSem1Choice&quot;]:checked').value);
              document.getElementById('divSem2Choice').innerHTML = getModuleName(document.querySelector('input[name=&quot;rdoSem2Choice&quot;]:checked').value);
    setPathway();
             "> 
    
    <table id='tblMSc'>
        <tr id='r0' class="trBG">
            <td id='r0c0' class="tdNoBG">
    
            </td>
            <td id='r0c1' class="clsSemester">
    SEMESTER 1
            </td>
            <td id='r0c2' class="tdThinDivider">
    
            </td>
            <td id='r0c3' class="tdPathway clsVA" >
    
    <label><input type="radio" name="rdoPathway" value="MSc" class="bcsradio" checked = "checked" onclick="setPathway();">MSc<label><br/>
    <label><input type="radio" name="rdoPathway" value="Diploma" class="bcsradio" onclick="setPathway();">Diploma<label><br/>
    <label><input type="radio" name="rdoPathway" value="Certificate" class="bcsradio" onclick="setPathway();">Certificate<label>
    
            </td>
            <td id='r0c4' class="tdThinDivider">
    
            </td>
            <td id='r0c5' class="tdNoBG">
    
            </td>
            <td id='r0c6' class="clsSemester">
    SEMESTER 2
            </td>
        </tr>
    
        <tr id='r1'  class="trBG">
            <td id='r1c0' class="tdNoBG">
    
            </td>
            <td id='r1c1' class="tdBG">
    
    
            </td>
            <td id='r1c2' class="tdThinDivider">
    
            </td>
            <td id='r1c3' class="tdNoBG">
    
            </td>
            <td id='r1c4' class="tdThinDivider">
    
            </td>
            <td id='r1c5' class="tdNoBG">
    
            </td>
            <td id='r1c6' class="tdBG">
    
            </td>
        </tr>
    
        <tr id='r2'  class="trBG">
            <td id='r2c0' class="tdBG">
    MPE5001
            </td>
            <td id='r2c1'  class="tdModuleTitle">
    Leadership and Professional Development<br/>in PE and Sport working with and for Young People
            </td>
            <td id='r2c2' class="tdThinDivider">
    
            </td>
            <td id='r2c3' class="tdNoBG">
    
            </td>
            <td  id='r2c4' class="tdThinDivider">
    
            </td>
            <td  id='r2c5' id='tdMPE5002' class="tdBG">
    MPE5002
            </td>
            <td  id='r2c6' class="tdModuleTitle">
    Research Methods in PE and Sport<br/>working with and for Young People
            </td>
        </tr>
    
        <tr id='r3'  class="trBG">
            <td id='r3c0' class="tdBG">
    
            </td>
            <td id='r3c1' class="tdBG">
    
            </td>
            <td id='r3c2' class="tdThinDivider">
    
            </td>
            <td id='r3c3' class="tdNoBG">
    
            </td>
            <td id='r3c4' class="tdThinDivider">
    
            </td>
            <td id='r3c5' class="tdBG">
    
            </td>
            <td id='r3c6' class="tdBG">
    
            </td>
        </tr>
    
        <tr id='r4'  class="trBG">
            <td id='r4c0' class="tdBG">
    MPE5004
            </td>
            <td id='r4c1' class="tdModuleTitle">
    Cognitive Development and Pedagogy Through PE and Sport
            </td>
            <td id='r4c2' class="tdThinDivider">
    
            </td>
            <td id='r4c3' class="tdNoBG">
    
            </td>
            <td id='r4c4' class="tdThinDivider">
    
            </td>
            <td id='r4c5' class="tdBG" rowspan="3">
    <label><input type="radio" name="rdoSem2Choice" value="MPE5006" class="bcsradio" checked = "checked" onclick=" document.getElementById('divSem2Choice').innerHTML = getModuleName(this.value);">MPE5006<label><br/><br/>or<br/><br/>
    <label><input type="radio" name="rdoSem2Choice" value="MPE5007" class="bcsradio" onclick=" document.getElementById('divSem2Choice').innerHTML = getModuleName(this.value);">MPE5007<label>
            </td>
            <td id='r4c6' class="tdModuleTitle" rowspan="3">
    <div id="divSem2Choice"></div>
            </td>
        </tr>
    
        <tr id='r5' class="trBG">
            <td id='r5c0' class="tdBG">
    
            </td>
            <td id='r5c1' class="tdBG">
    
            </td>
            <td id='r5c2' class="tdThinDivider">
    
            </td>
            <td id='r5c3' class="tdNoBG">
    
            </td>
        </tr>
    
        <tr id='r6'  class="trBG">
            <td id='r6c0' class="tdBG">
    <label><input type="radio" name="rdoSem1Choice" value="MPE5003" class="bcsradio" checked = "checked" onclick=" document.getElementById('divSem1Choice').innerHTML = getModuleName(this.value);">MPE5003<label><br/><br/>or<br/><br/>
    <label><input type="radio" name="rdoSem1Choice" value="MPE5005" class="bcsradio" onclick=" document.getElementById('divSem1Choice').innerHTML = getModuleName(this.value);">MPE5005<label>
    <span id='spnCertChoice'>
    <br/><br/>or<br/><br/>
    <label><input type="radio" name="rdoSem1Choice" value="MPE5004" class="bcsradio" onclick=" document.getElementById('divSem1Choice').innerHTML = getModuleName(this.value);">MPE5004<label>
    </span>
            </td>
            <td id='r6c1'  class="tdModuleTitle">
    <div id="divSem1Choice"></div>
            </td>
            <td id='r6c2'  class="tdThinDivider">
    
            </td>
            <td id='r6c3'  class="tdNoBG">
    
            </td>
        </tr>
    </table>

html-table

visibility

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-18 09:14:21

这是非常古怪的行为。

我认为这与以下事实有关:在javascript中，您正在设置表行<tr>可见性和表单元格<td>可见性，以便出现不匹配。行和单元格的先前状态似乎会影响css类的呈现方式。

我在下面创建了一个简单的示例，演示了这一点。随机化按钮将在50%的时间内将行和单元可见性设置为visible或collapse。至少使用Chrome (99.0.4844.74)，点击几下就可以得到没有内容但背景颜色可见的单元格，还有一些内容可见但没有背景色的单元格。

我找不到任何确定细胞行为的可靠逻辑。

document.querySelector("#randomize-btn").addEventListener("click", function() {
        randomizeVisibilities();
      });

      function randomizeVisibilities() {
        let table = document.querySelector("#t");
        for (let row of table.rows) {
          row.style.visibility = Math.random() > 0.5 ? "visible" : "collapse";
          for (let cell of row.cells) {
            cell.style.visibility = Math.random() > 0.5 ? "visible" : "collapse";
          }
        }
      }

      td {
        width: 50px;
        height: 50px;
      }

      tr {
        background: blue;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="randomize-btn">Randomize</button>
    <table id="t">
      <tr>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
      </tr>
      <tr>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
      </tr>
      <tr>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
      </tr>
      <tr>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
        <td>HELLO</td>
      </tr>
    </table>
  </body>
</html>

作为解决方案，我建议您不要在这种布局中使用表元素。一种可能是使用flexbox或grid layout来实现布局。然后，您可以切换该布局中各个div元素的可见性。

这里确实有很好的布局指南：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71516904

复制

相似问题

问使用Javascript隐藏HTML表元素时的意外行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript隐藏HTML表元素时的意外行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript隐藏HTML表元素时的意外行为
EN