firefox TBODY solution to misalignment when displaying and hiding with js_javascript skills

Look at the following example:

<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 Select all Note: If you need to introduce external Js, you need to refresh to execute

]

When it is displayed in firefox , the "first line" is displayed on the last line.
So after processing the lines that need to be displayed, I wrote another function to first record the lines that need to be displayed, then set the style.display of all lines to "none", and finally display the lines that need to be displayed in sequence. come out. In this way, the display results of IE and Firefox will be the same.
Later, I still felt that this method was stupid, so I studied it again and found that as long as I added style="display:block" to the second and third lines, the display would be normal. See the code below:

<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 Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

It can be seen that firefox has Whether style="display:block" is set is treated differently, and IE has made appropriate compatibility processing. The conclusion and lesson is: try to use standard practices and don’t expect browser compatibility. I often forget this after using IE too much. Note: If you don’t use tbody, you don’t have this problem. But tbody can play the role of grouping rows, which is useful when you need to show or hide multiple rows at a time.