2011-01-11 30 views
0

テキストボックスとボタンがあるフォームがあります。 デフォルトでは、ページの順序に従ってタブの順序が変更されています。しかし、私はいくつかの異なる方法でそれをしたい。 また、Tabindexプロパティが望ましい方法で動作しません。コントロールのタブ順序を設定する際の問題

注: メインテーブル内に4つのテーブルがあります。行くべき 順序は次のとおりです。まず、表1に、そしてその後、表3、表2、表4

私が欲しいの方法は次のとおりです。

  1. txtExamName
  2. btnExamAdd
  3. txtExamDescription
  4. btnExamClear
  5. btnEditExam
  6. btnDeleteExam
  7. txtProgramName
  8. txtProgramDescription
  9. btnAddProgram
  10. btnProgramClear
  11. btnEditProgram
  12. btnDeleteProgram
  13. ここ

が私のコードです:上記のコメントあたりAS

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" 
    Inherits="System.Web.Mvc.ViewPage<ReachOps.ApplicationServices.ExamDTO>" Title="Exam Type Program Type" %> 

<%@ Import Namespace="ReachOps.ApplicationServices.ViewModels" %> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server"> 
    <link href="<%= ResolveUrl("~") %>scripts/Grid/mvcGrid_blue.css" rel="stylesheet" 
     type="text/css" /> 
    <link href="../../scripts/DialogControl/subModal.css" rel="stylesheet" type="text/css" /> 
    <link href="<%= ResolveUrl("~") %>scripts/Grid/mvcGrid_grey.css" rel="stylesheet" 
     type="text/css" /> 
    <link href="<%= ResolveUrl("~") %>Content/ReachStyle.css" rel="stylesheet" type="text/css" /> 
    <link href="<%= ResolveUrl("~") %>scripts/ContextMenu/skins/cm_default/style.css" 
     rel="stylesheet" type="text/css" /> 
    <link href="../../scripts/DialogControl/subModal.css" rel="stylesheet" type="text/css" /> 
    <link href="../../scripts/ETPT/AddEtpt.css" rel="stylesheet" type="text/css" /> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <meta http-equiv="imagetoolbar" content="no"> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

    <script src="../../scripts/DialogControl/subModal.js" type="text/javascript"></script> 

    <link href="../../Scripts/DialogControl/subModal.css" rel="stylesheet" type="text/css" /> 

    <script language="javascript" src="../../scripts/ETPT/ETPT.js" type="text/javascript"></script> 

    <script src="../../scripts/jquery.getUrlParam.js" type="text/javascript"></script> 

    <script src="../../scripts/Grid/grid.js" type="text/javascript"></script> 

    <script src="../../scripts/Utilities.js" type="text/javascript"></script> 
    <%--Hitesh Gupta 
    Mantis ID :-12908, Date:-06/01/2011--%> 
    <script src="../../Scripts/jquery.alerts.js" type="text/javascript"></script> 
    <link href="../../Scripts/jquery.alerts.css" rel="stylesheet" type="text/css" /> 
    <%--Mantis ID :12908 Ends--%> 
    <div id="MainPage" class="MainDiv"> 
     <table class="MainTable"> 
      <tr> 
       <td colspan="6" class="BlankRow"> 
        &nbsp; 
       </td> 
      </tr> 
      <tr> 
       <td class=" Active " onclick="javascript:window.location.href('AddETPT');"> 
        <a class="TAb_a " href="/ExamTypeProgramType/AddETPT">Add Exam/Program Type</a> 
       </td> 
       <td style="width:5px;"></td> 
       <td class="Inactive " onclick="javascript:window.location.href('ETPTAssociation');"> 
        <a class="TAb_a " href="/ExamTypeProgramType/ETPTAssociation">Exam/Program Type Association</a> 
       </td> 
       <td style="width:5px;"></td> 
       <td class="Inactive " onclick="javascript:window.location.href('ProductList');"> 
        <a class="TAb_a " href="/ExamTypeProgramType/ProductList">Product List <span id="spnProductCount"> 
        </span></a>&nbsp; 
       </td> 
       <td class="Blank"> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="6" style="width: 935px; background-color: White;"> 
        <table class="outerTable"> 
         <tr> 
          <td colspan="5" style="height: 10px;"> 
          </td> 
         </tr> 
         <tr> 
          <td style="width: 20px;"> 
          </td> 
          <td class="TopTitle" colspan="3"> 

            <img src="../../Scripts/UCD Design/Icon_Information.gif" alt="" style="vertical-align:bottom;" /> 
            <span style="vertical-align:middle;"> 
            Add or edit exam types (ET) or program types (PT) in the page below:</span> 
          </td> 
          <td style="width: 20px;"> 
          </td> 
         </tr> 
         <tr> 
          <td style="width: 20px;"> 
          </td> 
          <td> 
           <table class="LeftTable"> 
            <tr> 
             <td colspan="2"> 
              <div class="TitleDiv"> 
               Add Exam Type&nbsp; 
              </div> 
             </td> 
            </tr> 
            <tr> 
             <td style="width: 100px; height: 15px;"> 
              &nbsp; 
             </td> 
             <td style="width: 315px; height: 15px;"> 
              &nbsp; 
             </td> 
            </tr> 
             <tr> 
              <td style="color: #990000; width: 100px;"> 
               *<span style="color: #434343; font-weight: bold;"> Exam Type </span> 
              </td> 
              <td class="RightTd"> 
               <input id="txtExamType" type="text" /> 
              </td> 
             </tr> 
             <tr> 
              <td style="width: 100px; height: 15px;"> 
               &nbsp; 
              </td> 
              <td style="width: 315px; height: 15px;"> 
               &nbsp; 
              </td> 
             </tr> 
             <tr> 
              <td style="color: #990000; width: 100px; vertical-align: top;"> 
               *<span style="color: #434343; font-weight: bold;"> Description</span> 
              </td> 
              <td class="RightTd"> 
               <textarea id="txtExamDescription" rows="3" cols="30" ></textarea> 
              </td> 
             </tr> 
             <tr> 
              <td colspan="2" style="text-align: right; width: 430px; padding-top: 15px; padding-right: 75px;"> 
               <input id="btnExamAdd" name="btnExamAdd" onclick="SaveExamType();" src="../../Scripts/UCD Design/Btn_Add.gif" 
                type="image" /> 
               <span style="padding-left: 10px;"> 
                <input id="btnExamClear" name="btnExamClear" src="../../Scripts/UCD Design/Btn_Clear.gif" 
                 onclick="ClearExam();" type="image" /> 
               </span> 
              </td> 
             </tr> 
             <tr> 
              <td colspan="2"> 
               &nbsp; &nbsp; 
              </td> 
             </tr> 
           </table> 
          </td> 
          <td rowspan="2" style="width: 50px; padding-left: 20px;"> 
           <div style="border-top: 1px dashed #BCBCBC; border-left: 1px dashed #BCBCBC; border-right: 0px; 
            border-bottom: 0px; width: 1px; height: 550px;"> 
           </div> 
          </td> 
          <td> 
           <table class="RightTable"> 
            <tr> 
             <td colspan="2"> 
              <div class="TitleDiv"> 
               Add Program Type&nbsp;</div> 
             </td> 
            </tr> 
            <tr> 
             <td style="width: 100px; height: 15px;"> 
              &nbsp; 
             </td> 
             <td style="width: 315px; height: 15px;"> 
              &nbsp; 
             </td> 
            </tr> 
            <tr> 
             <td style="color: #990000;"> 
              *<span style="color: #434343; font-weight: bold;"> Program Type</span> 
             </td> 
             <td class="RightTd"> 
              <input type="text" id="txtProgramType" /> 
             </td> 
            </tr> 
            <tr> 
             <td style="width: 100px; height: 15px;"> 
              &nbsp; 
             </td> 
             <td style="width: 315px; height: 15px;"> 
              &nbsp; 
             </td> 
            </tr> 
            <tr> 
             <td style="color: #990000; width: 100px; vertical-align: top;"> 
              *<span style="color: #434343; font-weight: bold;"> Description </span> 
             </td> 
             <td class="RightTd"> 
              <textarea id="txtProgramDescription" rows="3" cols="30" ></textarea> 
             </td> 
            </tr> 
            <tr> 
             <td colspan="2" style="text-align: right; padding-top: 15px; padding-right: 75px;"> 
              <input id="btnAddProgram" name="btnAddProgram" onclick="SaveProgramType();" src="../../Scripts/UCD Design/Btn_Add.gif" 
               type="image" /> 
              <span style="padding-left: 10px;"> 
               <input id="btnProgramClear" name="btnProgramClear" src="../../Scripts/UCD Design/Btn_Clear.gif" 
                onclick="ClearProgram();" type="image" /> 
              </span> 
             </td> 
            </tr> 
            <tr> 
             <td colspan="2"> 
              &nbsp; 
             </td> 
            </tr> 
           </table> 
          </td> 
          <td style="width: 20px;"> 
          </td> 
         </tr> 
         <tr> 
          <td style="width: 20px;"> 
          </td> 
          <td> 
           <table class="leftLowerTable"> 
            <tr> 
             <td> 
              <div id="divExamCount" class="TitleDiv"> 
              </div> 
             </td> 
            </tr> 
            <tr> 
             <td> 
              <div id="divExamType" class="DivGrid" style="height: 220px;"> 
              </div> 
             </td> 
            </tr> 
            <tr> 
             <td style="padding-top: 15px; padding-top: 10px;"> 
              <input id="btnEditExam" name="btnEditExam" onclick="GetExamType();" src="../../Scripts/UCD Design/Btn_Edit.gif" 
               type="image" /> 
              <span style="padding-left: 15px; padding-top: 10px;"> 
               <input id="btnDeleteExam" name="btnDeleteExam" onclick="DeleteExamType();" src="../../Scripts/UCD Design/Btn_Delete.gif" 
                type="image" /> 
              </span> 
             </td> 
            </tr> 
           </table> 
          </td> 
          <td> 
           <table class="RightLowerTable"> 
            <tr> 
             <td> 
              <div id="divProgramCount" class="TitleDiv"> 
              </div> 
             </td> 
            </tr> 
            <tr> 
             <td> 
              <div id="divProgramType" class="DivGrid" style="height: 220px;"> 
              </div> 
             </td> 
            </tr> 
            <tr> 
             <td style="padding-top: 15px;"> 
              <input id="btnEditProgram" name="btnEditProgram" onclick="GetProgramType();" src="../../Scripts/UCD Design/Btn_Edit.gif" 
               type="image" /> 
              <span style="padding-left: 15px;"> 
               <input id="btnDeleteProgram" name="btnDeleteProgram" onclick="DeleteProgramType();" 
                src="../../Scripts/UCD Design/Btn_Delete.gif" type="image" 
               /> 
              </span> 
             </td> 
            </tr> 
           </table> 
          </td> 
          <td style="width: 20px;"> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
      <td style="height:40px;"></td> 
      </tr> 
     </table> 

    </div> 
    <div id="divEditExamType" style="display: none; background-image: url('../../Scripts/UCD Design/Background_Overlay.png');"> 
     <table style="border: 0px ridge #3399FF; background-image: url('../../scripts/Images/Popup_-_Add_Template_files/u41.png'); 
      width: 598px; height: 288px;"> 
      <tr> 
       <td style="border-spacing: 8px" valign="top"> 
        <div style="margin-top: 8pt; margin-bottom: 8pt; margin-left: 19pt; margin-right: 10pt; 
         width: 554px;"> 
         <table style="border: 1px solid #FFFFFF; width: 97%; background-color: #FFFFFF; height: 235px;"> 
          <tr> 
           <td style="background-image: url('../../scripts/UCD Design/u45.png'); font-size: large; 
            font-weight: bold; color: #29537C;"> 
            &nbsp;&nbsp; Edit Exam Type&nbsp; 
           </td> 
          </tr> 
          <tr> 
           <td style="background-image: url('../../scripts/UCD Design/u48.png');" valign="top"> 
            &nbsp; 
            <table style="width: 94%; height: 153px;"> 
             <tr> 
              <td style="width: 258px"> 
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: Red">*</span> Exam 
               Type&nbsp; 
              </td> 
              <td> 
               <input name="txtEditExamType" id="txtEditExamType" style="width: 215px" type="text" /> 
              </td> 
             </tr> 
             <tr> 
              <td style="width: 258px"> 
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: Red">*</span> Description&nbsp; 
              </td> 
              <td> 
               <textarea name="txtEditExamDescription" id="txtEditExamDescription" rows="3" cols="25"></textarea> 
              </td> 
             </tr> 
             <tr> 
              <td colspan="2" align="right"> 
               &nbsp; <span style="padding-right: 20px;"> 
                <input id="btnSaveExam" name="btnSaveExam" onclick="EditExamType();" src="../../Scripts/UCD Design/Btn_Save.gif" 
                 type="image" value="Save" /></span> <span style="padding-right: 20px;"> 
                  <input id="btnCancelExam" name="btnCancelExam" onclick="ClosePopUp('divEditExamType');" 
                   src="../../Scripts/UCD Design/Btn_Cancel.gif" type="image" value="Cancel" /> 
                 </span> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="divEditProgramType" style="display: none; background-image: url('../../Scripts/UCD Design/Background_Overlay.png');"> 
     <table style="border: 0px ridge #3399FF; background-image: url('../../scripts/Images/Popup_-_Add_Template_files/u41.png'); 
      width: 598px; height: 288px;"> 
      <tr> 
       <td style="border-spacing: 8px" valign="top"> 
        <div style="margin-top: 8pt; margin-bottom: 8pt; margin-left: 19pt; margin-right: 10pt"> 
         <table style="border: 1px solid #FFFFFF; width: 97%; background-color: #FFFFFF; height: 235px;"> 
          <tr> 
           <td style="background-image: url('../../scripts/UCD Design/u45.png'); font-size: large; 
            font-weight: bold; color: #29537C; height: 36px;"> 
            &nbsp;&nbsp; Edit Program Type&nbsp; 
           </td> 
          </tr> 
          <tr> 
           <td style="background-image: background-image: url('../../scripts/UCD Design/u48.png'); 
            height: 216px;" valign="top"> 
            &nbsp;<table style="width: 94%; height: 153px;"> 
             <tr> 
              <td style="width: 258px"> 
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: Red">*</span> Program 
               Type&nbsp; 
              </td> 
              <td> 
               <input name="txtEditProgramType" id="txtEditProgramType" style="width: 215px" type="text" /> 
              </td> 
             </tr> 
             <tr> 
              <td style="width: 258px"> 
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: Red">*</span> Description&nbsp; 
              </td> 
              <td> 
               <textarea name="txtEditProgramDescription" id="txtEditProgramDescription" rows="3" 
                cols="25"></textarea> 
              </td> 
             </tr> 
             <tr> 
              <td colspan="2" align="right"> 
               &nbsp; <span style="padding-right: 20px;"> 
                <input id="btnSaveProgram" name="btnSaveProgram" onclick="EditProgramType();" src="../../Scripts/UCD Design/Btn_Save.gif" 
                 type="image" /></span> <span style="padding-right: 20px;"> 
                  <input id="btnCancelProgram" name="btnCancelProgram" onclick="ClosePopUp('divEditProgramType');" 
                   src="../../Scripts/UCD Design/Btn_Cancel.gif" type="image" /> 
                 </span> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</asp:Content> 
+2

このASPですか?もしそうなら、そのようにタグを付けます。ああ、あなたの質問は非常にフォーマットが貧弱で、私は誰もがそのHTMLをすべて実際に読んでいるとは想像できません。 – dandan78

+2

私は確かにすべてのHTMLを読んでいませんでした。最後に 'TabIndex'プロパティを使用した時、それは正常に動作しました。そして、「希望のやり方で行動しない」以上の情報はなく、私はあなたを助けることができません。 –

答えて

0

、少しはあります〜gここにしかし、私は次のことをお勧めします。

1)レンダリングされたページが有効であることを確認し、使用してエラーを修正http://validator.w3.org/

2)それでも問題が解決しない場合、あなたは

を生産されて期待するものがあることを確認するために、FirefoxとFirebugのを使用

3)最後に、それが目的の動作をもたらさない場合は、数個のボックスだけで問題を簡略化し、動作させてからもう一度ビルドしてみてください。

4)また、このタブオーダーを使用する必要がある理由について考えてください。タブオーダが自然なものになるように出力を再加工することができます。

関連する問題