2013-03-08 1 views
0

Firefox가 내 테이블을 제대로 표시하거나 숨기지 않습니다. 버튼 누르기의 머리글 만 표시하지 않습니다.Firefox가 내 테이블을 제대로 표시하거나 숨기지 않습니다. 버튼 만 눌렀을 때 헤더가 표시되지 않음

기본적으로 사용자가 버튼을 클릭하면 ID가 "HideMe"인 열 머리글과 같은 ID의 행이 표시됩니다. 이것은 크롬에서 완벽하게 작동하지만, 파이어 폭스에서

<html> 

<head> 
    <title>Show and Hide Javascript won't work in Firefox</title> 
    <style> 
     #HideMe { 
      display:none; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script> 
     jQuery(document).ready(function ($) { 
      $('.ShowPassword').click(function() { 
       $(HideMe).show(); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <table> 
     <tr> 
      <th>ID Number</th> 
      <th>First Name</th> 
      <th>Middle Name</th> 
      <th id="HideMe">Password</th> 
     </tr> 
     <tr> 
      <td>2121</td> 
      <td>Mike</td> 
      <td>Daniel</td> 
      <td id="HideMe">Password</td> 
     </tr> 
     <button class="ShowPassword">Show Password</button> 
</body> 

+0

동일한 ID를 가진 DOM 요소를 사용하는 것은 좋지 않지만 클래스를 사용해야합니다. – bandi

+0

나는 그것을 시도했지만 여전히 버튼을 누르면 파이어 폭스에서 숨겨진 쇼를 보여주지 않을 것이다 – user2148427

답변

0

이 결코에 바로

$(HideMe).show(); 

당신은 같은 것을 수행 할 수 있습니다하지 :

$('#HideMe').show(); 

바이올린 : http://jsfiddle.net/JS7tK/5/

처음에는 눈치 채지 못했지만 그의 의견 ID에는 bandi notes가 고유해야합니다. 그래서 같은 것을 수행하려고 : 나는 jQuery를하지 않는다

<html> 
    <head> 
     <title>Show and Hide Javascript won't work in Firefox</title> 
     <style> 
      .HideMe { 
       display:none; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
     <script> 
      jQuery(document).ready(function ($) { 
       $('.ShowPassword').click(function() { 
        $('.HideMe').show(); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <table> 
      <tr> 
       <th>ID Number</th> 
       <th>First Name</th> 
       <th>Middle Name</th> 
       <th class="HideMe">Password</th> 
      </tr> 
      <tr> 
       <td>2121</td> 
       <td>Mike</td> 
       <td>Daniel</td> 
       <td class="HideMe">Password</td> 
      </tr> 
      <button class="ShowPassword">Show Password</button> 
    </body> 
<html> 
+0

당신은 전혀 작동하지 않습니다. – user2148427

+0

그것은 : http://jsfiddle.net/JS7tK/ –

+0

당신이 제안한 것을 시도해도 Firefox에서 작동하지 않는 것은 버튼 누르기에서만 헤더를 보여줍니다. 시도해보십시오 : jsfiddle.net/JS7tK 을 firefox로 보시고 동일하게보실 것입니다 – user2148427

0

을하지만, 일을하기 때문에 원칙적으로는 의심 할 여지없이, 오히려 셀을 숨기려고 것보다 숨어 & 내부의 범위를 넣어 더 좋을 것입니다 그것은 테이블의 불균형을 초래하여 일부 브라우저에서는 허용하지 않습니다.

+0

i 대신 span 태그를 사용하지만 여전히 사용하지 않습니다. firefox에서 작동 (버튼 프레스의 열 머리글 만 계속 표시됨) - 크롬에서 정상적으로 작동 함) http://jsfiddle.net/JcRCJ/1/ – user2148427

+0

@bandi에서 말한 것처럼 동일한 요소가 여러 개 있으면 안됩니다 이드는 틀림없이이 문제를 혼란스럽게 할 것입니다. 클래스를 사용하거나 document.getElementsByName을 사용하여 클래스를 모두 동일한 이름과 주기로 지정하십시오. – blankabout

관련 문제