Problem with Setting Tab Order for controls
I have a form with some textbox and buttons. Now by default, tab order is going as per the sequence of controls on my page. But I want it to in some different manner. Also Tabindex property does not behave in desired manner
Note: There are 4 tables within main table. the order which should go is: First in table 1, then table 3, then table 2, then table 4
The manner I want is:
- txtExamName
- txtExamDescription
- btnExamAdd
- btnExamClear
- btnEditExam
- btnDeleteExam
- txtProgramName
- txtProgramDescription
- btnAddProgram
- btnProgramClear
- btnEditProgram
- btnDeleteProgram
Here is my code:
<%@ 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">
</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>
</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
</div>
</td>
</tr>
<tr>
<td style="width: 100px; height: 15px;">
</td>
<td style="width: 315px; height: 15px;">
</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;">
</td>
<td style="width: 315px; height: 15px;">
</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">
</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 </div>
</td>
</tr>
<tr>
<td style="width: 100px; height: 15px;">
</td>
<td style="width: 315px; height: 15px;">
</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;">
</td>
<td style="width: 315px; height: 15px;">
</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">
</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;">
Edit Exam Type
</td>
</tr>
<tr>
<td style="background-image: url('../../scripts/UCD Design/u48.png');" valign="top">
<table style="width: 94%; height: 153px;">
<tr>
<td style="width: 258px">
<span style="color: Red">*</span> Exam
Type
</td>
<td>
<input name="txtEditExamType" id="txtEditExamType" style="width: 215px" type="text" />
</td>
</tr>
<tr>
<td style="width: 258px">
<span style="color: Red">*</span> Description
</td>
<td>
<textarea name="txtEditExamDescription" id="txtEditExamDescription" rows="3" cols="25"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<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;">
Edit Program Type
</td>
</tr>
<tr>
<td style="background-image: background-image: url('../../scripts/UCD Design/u48.png');
height: 216px;" valign="top">
<table style="width: 94%; height: 153px;">
<tr>
<td style="width: 258px">
<span style="color: Red">*</span> Program
Type
</td>
<td>
<input name="txtEditProgramType" id="txtEditProgramType" style="width: 215px" type="text" />
</td>
</tr>
<tr>
<td style="width: 258px">
<span style="color: Red">*</span> Description
</td>
<td>
<textarea name="txtEditProgramDescription" id="txtEditProgramDescription" rows="3"
cols="25"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<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>
AS per the above comments, there is little to go on here. However, I'd suggest the following.
1) Check that the rendered page is valid, and correct any errors using the http://validator.w3.org/
2) If that does not fix the issue, use Firefox and Firebug to check that you have what you expect being produced
3) Finally, if that doesn't yield your desired behavior, try simplifying the problem down to a page with just a couple of boxes, get that to work, then build back up again.
4) Also - think about why you are needing to use this tab-order. You may be able to re-work the output so that the tab order is the natural one, then deal with the layout with CSS
加载中,请稍侯......
精彩评论