js_javascript 기술을 사용하여 표시하고 숨길 때 정렬 불량에 대한 firefox TBODY 솔루션

다음 예를 살펴보세요.

<table> <tbody id="tr1" style="display:none"> <tr> <td>第一行</td> </tr> </tbody> <tbody id="tr2"> <tr> <td>第二行</td> </tr> </tbody> <tbody id="tr3"> <tr> <td>第三行</td> </tr> </tbody> </table>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

Firefox에 표시되면 "첫 번째 줄"이 마지막 줄에 표시됩니다.
그래서 표시해야 할 줄을 처리한 후 먼저 표시해야 할 줄을 기록한 다음 모든 줄의 style.display를 "none"으로 설정하고 마지막으로 필요한 줄을 표시하는 또 다른 함수를 작성했습니다. 차례대로 표시됩니다. 이런 방식으로 IE와 Firefox의 표시 결과는 동일합니다.
나중에도 이 방법이 어리석다는 생각이 들어서 다시 연구해 본 결과 두 번째와 세 번째 줄에 style="display:block"만 추가하면 정상적으로 표시된다는 것을 알게 되었습니다. 아래 코드를 참조하세요.

<table> <tbody id="tr1" style="display:none"> <tr> <td>第一行</td> </tr> </tbody> <tbody id="tr2" style="display:block"> <tr> <td>第二行</td> </tr> </tbody> <tbody id="tr3" style="display:block"> <tr> <td>第三行</td> </tr> </tbody> </table>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

Firefox에서는 style="display:block" 설정 여부가 다르게 처리되며 IE에서는 적절한 호환성 처리를 수행한 것을 볼 수 있습니다. 결론과 교훈은: 표준 방식을 사용하고 브라우저 호환성을 기대하지 말라는 것입니다. IE를 너무 많이 사용한 후에는 종종 이것을 잊어버립니다. 참고: tbody를 사용하지 않으면 이 문제가 발생하지 않습니다. 하지만 tbody는 행을 그룹화하는 역할을 할 수 있는데, 이는 한 번에 여러 행을 표시하거나 숨겨야 할 때 유용합니다.