Home > Developer > JavaScript
Let's look at the example below:
<Html> <pead> </pead> <body onload = "javascript: body_load ();"> <table> <tbody id = "tr1" style = "display: none "> <tr> <td> first line </td> </tr> </tbody> <tbody id =" tr2 "> <tr> <td> second line </td> </tr> </tbody> <tbody id = "tr3"> <tr> <td> Row 3 </td> </tr> </tbody> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
When it is displayed in firefox, the "first line" is displayed on the last line.
Therefore, after processing the rows to be displayed, another function is written to record the rows to be displayed, and then the style of all rows. display is set to "none", and the rows to be displayed are displayed in sequence. In this way, the IE and firefox display results are the same.
Later, I thought this method was very stupid, and I studied it with great concentration. I found that as long as I added style = "display: block" to both the Second and double rows, the display would be normal. See the following code:
<Html> <pead> </pead> <body onload = "javascript: body_load ();"> <table> <tbody id = "tr1" style = "display: none "> <tr> <td> first line </td> </tr> </tbody> <tbody id =" tr2 "style =" display: block "> <tr> <td> Row 2 </td> </tr> </tbody> <tbody id =" tr3 "style =" display: block "> <tr> <td> Row 3 </td> </tr> </tbody> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
It can be seen that firefox treats style = "display: block" differently, While IE implements proper compatibility.
Conclusion and lessons learned: Try to use standard practices and do not expect browser compatibility. I often forget this when I use more IE.
NOTE: If tbody is not used, this problem does not occur. However, tbody can group rows. It is useful when multiple rows need to be displayed or hidden at a time.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
