我正在使用一个时间表应用程序,我在使用不同的浏览器隐藏/取消隐藏面板时遇到了一些问题。请参阅屏幕截图。
图 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&empNum=051006&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&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>