用javascript控制table某几行显示隐藏造成的问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Reports</title>
</head>
<body bgcolor='#ffffff' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' link='#339900' >
<form name="WebForm" method="post" id="WebForm"><style type="text/css">.DrillDownReport { BORDER-COLLAPSE: collapse }
.Toggler { BEHAVIOR: url(Toggler.htc) }
</style>
<script language="javascript">
function Toggle( clickedToggler )
{
    if( clickedToggler.State == "Expanded" )
    {  // We need to hide the child rows
        newDisplay = "none";
        clickedToggler.State = "Collapsed";
        clickedToggler.alt = Replace( clickedToggler.alt, "collapse", "expand" );
    }
    else
    {  // We need to show the child rows
        newDisplay = "inline";
        clickedToggler.State = "Expanded";
        clickedToggler.alt = Replace( clickedToggler.alt, "expand", "collapse" );
    }
    clickedToggler.src = "/images/" + clickedToggler.State + ".gif";

    var clickedTd = clickedToggler.parentNode;                          // Get the cell that contains the clicked '+' or '-'
    var clickedTr = clickedTd.parentNode;                               // Get the row that contains the clicked '+' or '-'
    var tBody = clickedTr.parentNode;                                   // Get the table body
    var clickedRowLevel = parseInt(clickedTr.RowLevel)
    var levelToHandle = clickedRowLevel + 1;                            // The row level to be made visible
    var currentTr = tBody.rows[clickedTr.rowIndex + 1];                 // Get the first row we'll be operating on i.e. the row following the clicked row                    // Get the display style of the rows we'll be operating on
    var currentRowLevel = parseInt( currentTr.RowLevel );

    while( (currentRowLevel >  clickedRowLevel) )
    {
        if( newDisplay == "inline" )
        {
            if( currentRowLevel == levelToHandle || currentTr.Visible )
            {
                currentTr.style.display = "inline";
                currentTr.Visible = true;
            }
        }
        else
        {
            if( currentRowLevel == levelToHandle ) currentTr.Visible = false;
            currentTr.style.display = "none";
        }

        currentTr = tBody.rows[currentTr.rowIndex + 1];
        if( currentTr == null ) break;
        currentRowLevel = parseInt(currentTr.RowLevel);
    }
} function Replace(str, find, rep)
    {
        var i = 0;
        while(true)
        {
            i = str.indexOf(find, i);
            if (i == -1) break;
            str = str.substr(0, i) + rep + str.substr(i + find.length);
            i += rep.length;
        }
        return str;
    }
</script>
<table cellSpacing="0" cellPadding="0" width="100%" bgColor="#ffffff" border="0">
    <tr>
        <td align="left"> </td>
    </tr>
</table>
            <table class="DrillDownReport" style="FONT-SIZE: 9pt; FONT-FAMILY: 'Trebuchet MS'; fixed: "
                rules="all" width="100%">
                <colgroup>
                    <col width="25">
                    <col width="25">
                    <col width="150">
                    <col width="150">
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <tbody>
                    <tr bgColor="#cc99ff"><td><b>State</b></td><td><b>Coverage Group</b></td><td><b>Physician</b></td><td><b>Medical Group</b></td><td><b>Total Physicians</b></td><td><b>Total Invites</b></td><td><b>Total Online Patients</b></td><td><b>New Invites</b></td><td><b>New Accepted Invites</b></td><td><b>New Online Patients</b></td><td><b>New Invites / Physician</b></td><td><b>New Patients / Physician</b></td></tr><tr RowLevel="1" style="display:inline;"><td colspan="3"><img onclick="Toggle(this);" src="/images/collapsed.gif" alt="Click to expand rows for Georgia">Georgia</td><td></td><td>10</td><td>1</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0.000</td><td>0.000</td></tr><tr RowLevel="2" style="display:none;"><td></td><td colspan="2"><img onclick="Toggle(this);" src="/images/collapsed.gif" alt="Click to expand rows for Dr. Christopher Lee Stevens's Practice">Dr. Christopher Lee Stevens's Practice</td><td></td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0.000</td><td>0.000</td></tr><tr RowLevel="3" style="display:none;"><td></td><td></td><td>Dr. Christopher Lee Stevens</td><td></td><td>---</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>---</td><td>---</td></tr><tr RowLevel="2" style="display:none;"><td></td><td colspan="2"><img onclick="Toggle(this);" src="/images/collapsed.gif" alt="Click to expand rows for Dr. George George's Practice">Dr. George George's Practice</td><td></td><td>1</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0.000</td><td>0.000</td></tr><tr RowLevel="3" style="display:none;"><td></td><td></td><td>Dr. George George</td><td></td><td>---</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>---</td><td>---</td></tr><tr RowLevel="2" style="display:none;"><td></td><td colspan="2"><img onclick="Toggle(this);" src="/images/collapsed.gif" alt="Click to expand rows for Freeman Medical">Freeman Medical</td><td></td><td>1</td><td>0</td><td>3</td><td>0</td><td>0</td><td>0</td><td>0.000</td><td>0.000</td></tr><tr RowLevel="3" style="display:none;"><td></td><td></td><td>Dr. Charles Freeman</td><td></td><td>---</td><td>0</td><td>3</td><td>0</td><td>0</td><td>0</td><td>---</td><td>---</td></tr><tr RowLevel="2" style="display:none;"><td></td><td colspan="2"><img onclick="Toggle(this);" src="/images/collapsed.gif" alt="Click to expand rows for Good Health Clinic">Good Health Clinic</td><td></td><td>1</td><td>0</td><td>2</td><td>0</td><td>0</td><td>0</td><td>0.000</td><td>0.000</td></tr><tr RowLevel="3" style="display:none;"><td></td><td></td><td>Dr. Monica Ellis MD</td><td></td><td>---</td><td>0</td><td>2</td><td>0</td><td>0</td><td>0</td><td>---</td><td>---</td></tr><tr RowLevel="2" style="display:none;"><td></td><td colspan="2"><img onclick="Toggle(this);" src="/images/collapsed.gif" alt="Click to expand rows for Jolene Donovon MD's Practice">Jolene Donovon MD's Practice</td><td></td><td>1</td><td>0</td><td>3</td><td>0</td><td>0</td><td>0</td><td>0.000</td><td>0.000</td></tr><tr RowLevel="3" style="display:none;"><td></td><td></td><td>Jolene Donovon MD</td><td></td><td>---</td><td>0</td><td>3</td><td>0</td><td>0</td><td>0</td><td>---</td><td>---</td></tr>
                </tbody>
            </table>
</form></body>
</html>
这个属于ie的bug，应该不可以修正的。如果用图层就不会出现这种情况。

调试易

用javascript控制table某几行显示隐藏造成的问题

解决方案 »