Tbody in Firefox with JS display and hide when the dislocation of the solution

Source: Internet
Author: User
firefox|js| Solution | Show |tbody

Today to help others write a Web page, found: When using JavaScript dynamically set Tr.style.display = "Block" To display a row, using IE browsing is no problem, but the use of Firefox browsing when the row was moved to the back of the other line, is very surprised. Look at the following example:

<script type= "Text/javascript" >
function Body_load ()
{
var obj = document.getElementById ("TR1");
Obj.style.display = "block";
}
</script>
<body >
<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> Third line </td>
</tr>
</tbody>
</table>
</body>

When it is displayed in Firefox, the "First row" is displayed on the last line.

So after processing the lines that need to be displayed, write another function, first record the rows that need to be displayed, and then set the style.display of all rows to none, and then display the rows that need to be displayed in turn. In this way, IE and Firefox display the same results.

Later, I still think this method is very stupid, and painstaking research, found that as long as the second line and all three lines plus style= "Display:block", the display is normal. See the following code:
<script type= "Text/javascript" >
function Body_load ()
{
var obj = document.getElementById ("TR1");
Obj.style.display = "block";
}
</script>
<body >
<table>
<tbody id= "TR1" style= "Display:none" >
<tr>
<td> First line </td>
</tr>
</tbody>
<tbody id= "TR2" style= "Display:block" >
<tr>
<td> Second Line </td>
</tr>
</tbody>
<tbody id= "TR3" style= "Display:block" >
<tr>
<td> Third line </td>
</tr>
</tbody>
</table>
</body>

This shows that firefox on whether to set style= "Display:block" is differentiated, and IE made the appropriate compatible treatment.
The conclusion and lesson is: try to use standard practices and do not expect browsers to be compatible. ie use more often will forget this point.

Note: If you do not use tbody, you do not have this problem. However, tbody can play a role in grouping rows, which is useful when you want to show or hide multiple rows at once.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.