我有一个带有一些文本框和按钮的表单。 现在默认情况下，Tab键顺序按照我页面上的控件序列进行。但我希望以某种不同的方式。 Tabindex属性也不会以所需的方式运行
注意： 主表内有4个表。 应该采取的顺序是：首先在表1中，然后是表3，然后是表2，然后是表4
我想要的方式是：
这是我的代码：
<%@ 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>
答案 0 :(得分：0)
根据上述评论，这里几乎没有什么可做的。但是，我建议如下。
1）检查呈现的页面是否有效，并使用http://validator.w3.org/
更正任何错误2）如果这不能解决问题，请使用Firefox和Firebug检查您是否拥有预期的产品
3）最后，如果这不会产生您想要的行为，请尝试将问题简化为只有几个框的页面，让它工作，然后重新构建。
4）另外 - 想想你为什么需要使用这个标签顺序。您可以重新输出输出以使Tab键顺序是自然的，然后使用CSS处理布局