切换不使用新浏览器

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”）时，表格会在所有浏览器中正确显示。单击与切换相关的按钮，但它会隐藏，然后在较新的浏览器中显示该表。

这是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/当我可以从我的服务器中删除此页面时，请通知

Answer 2

更新以下内容：

<button onClick="toggleVisibility(panel94458)"></button>

到

<button onClick="javascript:toggleVisibility(panel94458);" type="button"></button>

根据http://www.w3schools.com/tags/tag_button.asp

  

提示：始终指定元素的type属性。   不同的浏览器使用不同的默认类型   元件。

Answer 3

1. 正如我已经提到的显示问题，当你希望元素可见时使用“table-row”，而不是“”

2. 对于消失问题，您的按钮会导致您的表单被提交。有两种简单的解决方法选项

   • 将您的元素更改为没有关联操作的元素，例如span： <span onClick="toggleVisibility(panel94458)">View</span>

   • 通过javascript阻止默认按钮操作： <button onClick="toggleVisibility(panel94458); return false;">View</button>

Answer 4

您使用的是ASP.NET Web窗体吗？哪个版本？

如果是这样，在现代浏览器中可能不起作用的一个原因是ASP.NET无法正确识别浏览器，并且默认为低级响应javascript和HTML。

（您可以通过在不同浏览器中保存页面源并进行比较来验证这一点。）

要帮助解决此问题，您需要更新ASP.NET对浏览器及其功能的了解。希望这个链接可以帮助您排序：http://aspnet.codeplex.com/releases/view/41420

确保您使用较新版本的ASP.NET也可以让它为您服务。

Answer 5

在toggleVisibility中，尝试将panel.style.display = "";替换为panel.style.display = "table-cell";

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 6

尝试使用'==='而不是'=='，如下所示： -

function toggleVisibility（面板） {     if（panel.style.display ===“none”）     {         panel.style.display =“”;     }     其他     {         panel.style.display =“none”;     } }

这是一个传单，但这之前让我搞砸了。我也想把它设置为空白，即'panel.style.display =“”;'会引起问题。当然应该是'阻止'？