javascript - Toggle 不使用新浏览器

Question

我正在使用一个时间表应用程序，我在使用不同浏览器隐藏/取消隐藏面板时遇到了一些问题。查看屏幕截图。

图片 1:这是我正在做的事情的一般起始页。单击按钮。

图片 2:这是预期的输出。这是我在 IE8 中得到的输出。

图 3:这是最新 Chrome 的输出。面板显示(不正确，请注意它没有跨越表格，它只有一列宽)一瞬间然后再次隐藏。我在最新的 Firefox 和 IE 中得到了相同的结果。

这是用于切换的 Javascript。

function toggleVisibility(panel)
{
    if (panel.style.display == "none")
    {
        panel.style.display = "";
    }
    else
    {
        panel.style.display = "none";
    }
}

这是调用切换的aspx.cs

        TableCell showCell = new TableCell();
        HtmlButton showButton = new HtmlButton();
        showButton.Attributes.Add("onClick", "toggleVisibility(panel" +  timesheet.timesheetId.ToString() + ")");
        showCell.Controls.Add(showButton);

        TableCell nameCell = new TableCell();
        HyperLink nameLink = new HyperLink();
        nameLink.NavigateUrl = "./timesheet.aspx?timesheetId=" +  timesheet.timesheetId.ToString()+ "&empNum=" + timesheet.employeeId + "&PopUp=" + _approverEmployeeId;
        nameLink.Text = employeeName;
        nameLink.Target = "_blank";
        nameCell.Controls.Add(nameLink);

在 aspx.cs 文件的更下方是定义面板的位置。

        TableRow childRow = new TableRow();
        TableCell childCell = new TableCell();
        childCell.ColumnSpan = headerRow.Cells.Count;
        childCell.Controls.Add(childTable);
        childRow.Controls.Add(childCell);
        childRow.Attributes.Add("Style", "Display: none");
        childRow.ID = "panel" + timesheet.timesheetId;

        summaryTable.Rows.Add(headerRow);
        summaryTable.Rows.Add(childRow);

当我删除 childRow.Attributes.Add("Style", "Display: none") 时，表格会在所有浏览器中正确显示。单击绑定(bind)到切换的按钮虽然它会隐藏然后在较新的浏览器中显示表格。

这是 HTML 的片段。可以在此处找到整个页面的 HTML http://asalim.net/approval.txt .

    <table id="summaryTable" rules="all" bordercolor="Silver" border="1" style="border-color:Silver;border-style:None;height:32px;width:768px;Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 136px">
    <tr>
        <td>Show Detail</td>
        <td>Name</td>
        <td>EmployeeNumber</td>
        <td>Approved</td>
        <td>Reject</td>
    </tr>
    <tr id="summary94458" style="border-color:Black;border-width:1px;border-style:Solid;">
        <td><button onClick="toggleVisibility(panel94458)"></button></td>
        <td><a href="./timesheet.aspx?timesheetId=94458&amp;empNum=051006&amp;PopUp=051006" target="_blank">XXXXXXXXXXXXXXXXXXXXXXX</a></td>
        <td>051006</td>
        <td><input id="allApproved94458" type="checkbox" name="allApproved94458" onclick="approveLines(this, 94458);" /></td>
        <td><input type="submit" name="reject94458" value="Reject" onclick="window.open( './reject.aspx?empNum=051006&amp;timesheetId=94458');" language="javascript" id="reject94458" /></td>
    </tr>
    <tr id="panel94458" style="Display: none">
        <td colspan="5"><table id="detailTable94458" bordercolor="Black" border="0" style="border-color:Black;border-width:1px;border-style:Solid;width:100%;">
            <tr>
                <td>Description</td>
                <td>Job</td>
                <td>Extra</td>
                <td>Cost Code</td>
                <td>Reg Hours</td>
                <td>OT Hours</td>
                <td>Mileage</td>
                <td>Approved</td>
            </tr>

Answer 1

您应该添加 type="button"。适用于最新的 Chrome:http://test.dogaev.pp.ua/请告知我何时可以从我的服务器中删除此页面