1

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

图 1:这是我正在做的一般起始页。点击按钮。

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

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

这是我正在做的事情的一般起始页。 点击按钮。 这是预期的输出。 这是我在 IE8 中得到的输出。 这是最新 Chrome 的输出。 面板显示(不正确)片刻并再次隐藏。 我在最新的 Firefox 中得到了相同的结果。

这是用于切换的 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>
4

6 回答 6

3

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

于 2013-11-18T17:17:00.490 回答
2

更新以下内容:

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

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

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

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

于 2013-10-25T05:43:51.197 回答
2
  1. 正如我已经提到的显示问题,当您希望元素可见时使用“table-row”,而不是“”
  2. 对于消失问题,您的按钮导致您的表单被提交。有两个简单的解决方法选项

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

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

于 2013-11-16T18:40:04.983 回答
0

您使用 ASP.NET Web 窗体吗?哪个版本?

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

(您可以通过将页面源保存在不同的浏览器中并进行比较来验证。)

为了帮助解决这个问题,您需要更新浏览器及其功能的 ASP.NET 知识。希望这个链接能让你排序:http ://aspnet.codeplex.com/releases/view/41420

确保您使用的是较新版本的 ASP.NET 也可能会为您工作。

于 2013-11-20T03:31:20.867 回答
-1

toggleVisibility中,尝试替换panel.style.display = "";panel.style.display = "table-cell";

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

于 2013-11-14T06:08:33.620 回答
-1

尝试使用 '===' 而不是 '==',如下所示:-

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

这有点像传单,但这以前让我很困惑。我也想把它设置为空白,即'panel.style.display = "";' 会导致问题。当然应该是“块”?

于 2013-11-16T13:56:35.740 回答