1

さまざまなブラウザーを使用してパネルを非表示/非表示にすると問題が発生するタイムシート アプリケーションを使用しています。スクリーンショットを参照してください。

画像 1: これは、私がやっていることの一般的な開始ページです。ボタンをクリックします。

画像 2: これは予想される出力です。それは私がIE8で得た出力です。

画像 3: これは最新の Chrome の出力です。パネルが一瞬だけ表示され (不適切に、テーブル全体に広がっていないことに注意してください。幅は 1 列のみです)、再び非表示になります。最新の 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
  1. 表示の問題について既に述べたように、要素を表示したい場合は "" ではなく "table-row" を使用してください。
  2. 消失の問題については、ボタンが原因でフォームが送信されます。2 つの簡単な回避策があります

    • 要素を、スパンなどのアクションが関連付けられていないものに変更します。 <span onClick="toggleVisibility(panel94458)">View</span>

    • JavaScript を介してデフォルトのボタン アクションを防止します。 <button onClick="toggleVisibility(panel94458); return false;">View</button>

于 2013-11-16T18:40:04.983 に答える
2

以下を更新します。

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

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

http://www.w3schools.com/tags/tag_button.aspに従って

ヒント: 要素には必ず type 属性を指定してください。ブラウザーが異なれば、要素の既定の型も異なります。

于 2013-10-25T05:43:51.197 に答える
0

ASP.NET Web フォームを使用していますか? どのバージョン?

その場合、最新のブラウザーで動作しない可能性がある理由の 1 つは、ASP.NET がブラウザーを適切に認識せず、ダウンレベルの応答 JavaScript および HTML をデフォルトに設定していることです。

(ページのソースを別のブラウザに保存して比較することで確認できる場合があります。)

これを修正するには、ブラウザーとその機能に関する ASP.NET の知識を更新する必要があります。うまくいけば、このリンクで整理できます: http://aspnet.codeplex.com/releases/view/41420

ASP.NET の新しいバージョンを使用していることを確認すると、それが機能する場合もあります。

于 2013-11-20T03:31:20.867 に答える
-1

次のように、「==」の代わりに「===」を使用してみてください:-

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

ちょっとしたチラシですが、これは以前私を混乱させました。空白に設定することも考えます。つまり、「panel.style.display = "";」問題を引き起こすでしょう。確かに「ブロック」すべきですか?

于 2013-11-16T13:56:35.740 に答える