IE6 Javascript ClassName 변경 디스플레이

다음은 현재 직장에서 직면하고있는 문제의 단순화 된 버전입니다. 코드는 Firefox 3.6에서와 같이 실행됩니다. 행을 클릭하면 Javascript가 클래스 이름을 변경하고 하위 요소의 속성도 변경되어야합니다.IE6 Javascript ClassName 변경 디스플레이

그러나 IE6 및 다른 버전에서는 "title1"및 "title2"TD에서만 작동합니다. 즉, 색상이 바뀝니다. 작동하지 않는 것은 "value1"및 "value2"가 display : none에서 기본값으로 변경되는 것입니다. 나는 TD의 style.display 속성으로 아무런 노력을하지 않고 노력했다.

도움을 주시면 감사하겠습니다.

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      table#input{ 
       width: 100%; 
       border-collapse: collapse;    
      } 
      table#input tr{ 
       border-bottom: 1px solid #333; 
      } 
      table#input td{ 
       padding: 4px; 
      } 
      tr.disabled td.key{ 
       color: #ccc; 
      } 
      tr.disabled td.value{ 
       display: none; 
      } 
     </style> 
     <script type="text/javascript"> 
      function toggleVisibility(rowElem){ 
       rowElem.className = (rowElem.className == 'disabled') ? 'enabled' : 'disabled'; 
      } 
     </script> 
    </head> 
    <body> 
     <table id="input"> 
      <tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title1</td><td class="value">value1</td></tr> 
      <tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title2</td><td class="value">value2</td></tr> 
     </table> 
    </body> 
</html>

출처

2011-04-09 Maros Hluska

tr.enabled에 대한 속성 정의를 시도 했습니까? – tkm256

그래, "사용"클래스의 행 TD를 표시하려고 : table-cell,하지만 문제가 해결되지 않았습니다. –

FF와 IE6-8에서 작동하는 대체 솔루션이 등장했습니다. 클래스 = "값"각 TD, 나는 스팬 태그의 내용을 둘러싼 스타일 시트에 다음과 같이 변경했다 : 행이 비활성화 된 경우, 모든 값의 내용이 화면을 숨길 수 있어야 이제

tr.disabled td.value span{ 
    position: absolute; 
    top: -20px; 
}

을 .

출처

2011-04-10 19:32:35

IE6 Javascript ClassName 변경 디스플레이

답변

관련 문제