Asp VBscript,set up navigation of table vertically with the tabkey (through cell columns, up down)

Hi there,
I have tables in ASP, how can I set up navigation of the table with the tabkey in up down through cell columns?
with existing tables, the default navigation is horizonta (through row, left to right), I need it to be vertical,(go through
column by column, not row by row)
thank you.
xuqn
xuqnAsked:
Who is Participating?
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
Maybe I misunderstood.  I understood that you want to set the tabindex in a form that uses a table to position the fields.  Is that correct?  In my simplified example I put the tabindex attribute in the td tag.  It would actually go in the input tag.  Since the html you provided only has one field per row then what do you mean go to the next column?  Can you provide a URL to your page or a little more html to show what you mean?

A simple example of the html side of what I meant is if you had a form that looked like ...

------------------------------------------------------------------------------
|  Name: _________      |            Phone: __________________        |
------------------------------------------------------------------------------
|  Address: __________________                                                      |
------------------------------------------------------------------------------

You can control the way the tab key moves the cursor through the fields by specifying a tabindex attribute.  A simple example of the basic html is below ...

Name: <input tabindex="1">
Phone: <input tabindex="3">
Address: <input tabindex="2">

That will make it so the tab key will first go to Name, then Address and last of all Phone.

Does that help?

bol
0
 
b0lsc0ttIT ManagerCommented:
xuqn,

Do you know how many rows?  If so, this wouldn't be too hard.  Since you have to write the row before starting the next you would just increment the tabindex by the number of rows as you move from cell to cell.  For example if you knew that the table would have 15 rows then use something like this ...

<%
tabCount = 1
Response.Write "<tr>"
Response.Write "<td tabindex=""" & tabCount + 0 & """>Cell</td>"
Response.Write "<td tabindex=""" & tabCount + 15 & """>Cell2</td>"
Response.Write "<td tabindex=""" & tabCount + 30 & """>Cell3</td>"
Response.Write "</tr>"

Then increment the tabCount by 1 and repeat for other rows.  If you don't know the number of rows you could use a number mucher higher than the possible number of rows.  This will leave gaps in the index but should still work to give the tab effect you want.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
xuqnAuthor Commented:
Hi b0lsc0tt,
thank you for yuor speedy response, I still did get it, in my ASP, I have table 5x6, 5 columns 6 rows,
(I have three of those tables), when the user clicks on the tabkey, it is going through every row by row,
now, I want it to go through column by column instead.
the table code in the ASP like below, so as you said that I just set up variable tabCount = 1, then
do "<td tabindex=""" & tabCount + 0 & """>Cell</td>" for each row?,  the tabCount only need to
increate  by 1 for  each row, am I right?
for "<td tabindex=""" & tabCount + 15 & """>Cell2</td>", please advise me what is the 0 & and 15 &?
thank you
xuqn
//
<table border="0" bgcolor="#dcdcdc">
              <tr>
                <td width="30%" align="right"><basefont size=1><%If Action="SUBMIT" and len (pname)<1 Then%><font color=red><%end if%>Purchaser's Name:</td>
                <td width="70%" colspan="5">
                  <form method="POST" action="ShoePurchase.asp">
                    <p><input type="text" name="pname" size="70" value="<%=pname%>" ></p>
                </td>
                 </tr>
             <tr>
                <td width="30%" align="right"><basefont size=1><%If Action="SUBMIT" and len (storemanager)<1 Then%><font color=red><%end if%>Store Manager:</font></td>
                <td width="70%" colspan="5">
                    <p><input type="text" name="storemanager" size="70" value="<%=storemanager%>"></p>
                  </td>

             </tr>
              <tr>
                <td width="30%" align="right"><basefont size=1>Store E-Mail Address:</td>
                <td width="70%" colspan="5">
                   
                    <%=emailAdd%> <input type="hidden" name="emailAdd" size="50" value="<%=emailAdd%>">
                  </td>
             </tr>
             <tr>
                <td width="30%" align="right"><basefont size=1>&nbsp;&nbsp; </td>
                <td width="70%" colspan="5">
                    <basefont size=1><Strong>Please verify your email address.<br>If incorrect, Please go to My Application ->My Profile to correct your email address before continuing.</Strong>
                  </td>
             </tr>
//
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
xuqnAuthor Commented:
Hi b0lsc0tt ,
thank you for your help, sorry I did not say it clear, yes you are right, I just want to make the focus (cursor)
through the fields vertical instead of horizontal, the fields are table cells. now I understand it as you said that
the tabindex attribute can be set to do that, I tried, somehow, it is not working for my tables, code is below,
I only copied part of the code, actually the ASP has several tables, (table in table, to lay out the page kind of thing),
I set the tabindex on the first column, when I press the tab key, the coursor still goes horizontal, goes to next to cell, not the cell below it, not vertial,
please help me.
Thank you.
xuqn

//
<table border="0"  width="730" bgcolor="#dcdcdc">
<tr>
       <td width="20%">
            <p>
               FREE SHOE
            </p>
       </td>
      <td width="20%"><%If Action="SUBMIT" and len (brandf1)>0 and (len (shoenamef1) <1 or len (stylenumberf1) <1 or len (sizef1) <1 or len (widthf1) <1) Then%><font color=red><%end if%> 1st Choice</font></td>
            
     
       <td width="20%">
            <p>
               2nd Choice
            </p>
      </td>
        <td width="20%">
         <p>
               3rd Choice
            </p>
            </td>
   
            <td width="20%">
            <p>
               4th Choice
              </p>
            </td>
   
   
</tr>
<tr>
    <td width="20%">
       <p>Brand </p>
    </td>
    <td width="20%" tabindex="1">
       <p><input type="text" name="brandf1" size="12" value="<%=brandf1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="brandf2" size="12" value="<%=brandf2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="brandf3" size="12" value="<%=brandf3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="brandf4" size="12" value="<%=brandf4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Shoe Name </p>
    </td>
    <td width="20%" tabindex="2">
       <p><input type="text" name="shoenamef1" size="12" value="<%=shoenamef1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="shoenamef2" size="12" value="<%=shoenamef2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="shoenamef3" size="12" value="<%=shoenamef3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="shoenamef4" size="12" value="<%=shoenamef4%>"></p>
    </td>
</tr>

<tr>
    <td width="20%">
       <p>Style Number </p>
    </td>
    <td width="20%" tabindex="3">
       <p><input type="text" name="stylenumberf1" size="12" value="<%=stylenumberf1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="stylenumberf2" size="12" value="<%=stylenumberf2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="stylenumberf3" size="12" value="<%=stylenumberf3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="stylenumberf4" size="12" value="<%=stylenumberf4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Size </p>
    </td>
    <td width="20%" tabindex="4">
       <p><input type="text" name="sizef1" size="12" value="<%=sizef1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="sizef2" size="12" value="<%=sizef2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="sizef3" size="12" value="<%=sizef3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="sizef4" size="12" value="<%=sizef4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Width </p>
    </td>
    <td width="20%" tabindex="5">
       <p><input type="text" name="widthf1" size="12" value="<%=widthf1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="widthf2" size="12" value="<%=widthf2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="widthf3" size="12" value="<%=widthf3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="widthf4" size="12" value="<%=widthf4%>"></p>
    </td>
</tr>
</table>
<table border="0"  width="730" bgcolor="#dcdcdc">
<tr> <td colspan=5 width="100%">&nbsp;&nbsp;&nbsp; </td> </tr>
<tr>
       <td width="20%">
            <p>
               30% OFF
            </p>
       </td>
      <td width="20%"> <%If Action="SUBMIT" and len (brand30a1)>0 and (len (shoename30a1) <1 or len (stylenumber30a1) <1 or len (size30a1) <1 or len (width30a1) <1) Then%><font color=red><%end if%> 1st Choice</font></td>
            
       <td width="20%">
            <p>
               2nd Choice
            </p>
      </td>
        <td width="20%">
         <p>
               3rd Choice
            </p>
            </td>
   
            <td width="20%">
            <p>
               4th Choice
              </p>
            </td>
   
   
</tr>
<tr>
    <td width="20%">
       <p>Brand </p>
    </td>
    <td width="20%">
       <p><input type="text" name="brand30a1" size="12" value="<%=brand30a1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="brand30a2" size="12" value="<%=brand30a2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="brand30a3" size="12" value="<%=brand30a3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="brand30a4" size="12" value="<%=brand30a4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Shoe Name </p>
    </td>
    <td width="20%">
       <p><input type="text" name="shoename30a1" size="12" value="<%=shoename30a1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="shoename30a2" size="12" value="<%=shoename30a2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="shoename30a3" size="12" value="<%=shoename30a3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="shoename30a4" size="12" value="<%=shoename30a4%>"></p>
    </td>
</tr>

<tr>
    <td width="20%">
       <p>Style Number </p>
    </td>
    <td width="20%">
       <p><input type="text" name="stylenumber30a1" size="12" value="<%=stylenumber30a1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="stylenumber30a2" size="12" value="<%=stylenumber30a2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="stylenumber30a3" size="12" value="<%=stylenumber30a3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="stylenumber30a4" size="12" value="<%=stylenumber30a4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Size </p>
    </td>
    <td width="20%">
       <p><input type="text" name="size30a1" size="12" value="<%=size30a1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="size30a2" size="12" value="<%=size30a2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="size30a3" size="12" value="<%=size30a3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="size30a4" size="12" value="<%=size30a4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Width </p>
    </td>
    <td width="20%">
       <p><input type="text" name="width30a1" size="12" value="<%=width30a1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="width30a2" size="12" value="<%=width30a2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="width30a3" size="12" value="<%=width30a3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="width30a4" size="12" value="<%=width30a4%>"></p>
    </td>
</tr>
</table>
<table border="0"  width="730" bgcolor="#dcdcdc">
<tr> <td colspan=5 width="100%">&nbsp;&nbsp;&nbsp; </td> </tr>
<tr>
       <td width="20%">
            <p>
               30% OFF
            </p>
       </td>
      <td width="20%"> <%If Action="SUBMIT" and len (brand30b1)>0 and (len (shoename30b1) <1 or len (stylenumber30b1) <1 or len (size30b1) <1 or len (width30b1) <1) Then%><font color=red><%end if%> 1st Choice</font></td>
            
      </td>
       <td width="20%">
            <p>
               2nd Choice
            </p>
      </td>
        <td width="20%">
         <p>
               3rd Choice
            </p>
            </td>
   
            <td width="20%">
            <p>
               4th Choice
              </p>
            </td>
   
   
</tr>
<tr>
    <td width="20%">
       <p>Brand </p>
    </td>
    <td width="20%">
       <p><input type="text" name="brand30b1" size="12" value="<%=brand30b1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="brand30b2" size="12" value="<%=brand30b2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="brand30b3" size="12" value="<%=brand30b3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="brand30b4" size="12" value="<%=brand30b4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Shoe Name </p>
    </td>
    <td width="20%">
       <p><input type="text" name="shoename30b1" size="12" value="<%=shoename30b1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="shoename30b2" size="12" value="<%=shoename30b2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="shoename30b3" size="12" value="<%=shoename30b3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="shoename30b4" size="12" value="<%=shoename30b4%>"></p>
    </td>
</tr>

<tr>
    <td width="20%">
       <p>Style Number </p>
    </td>
    <td width="20%">
       <p><input type="text" name="stylenumber30b1" size="12" value="<%=stylenumber30b1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="stylenumber30b2" size="12" value="<%=stylenumber30b2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="stylenumber30b3" size="12" value="<%=stylenumber30b3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="stylenumber30b4" size="12" value="<%=stylenumber30b4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Size </p>
    </td>
    <td width="20%">
       <p><input type="text" name="size30b1" size="12" value="<%=size30b1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="size30b2" size="12" value="<%=size30b2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="size30b3" size="12" value="<%=size30b3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="size30b4" size="12" value="<%=size30b4%>"></p>
    </td>
</tr>
<tr>
    <td width="20%">
       <p>Width </p>
    </td>
    <td width="20%">
       <p><input type="text" name="width30b1" size="12" value="<%=width30b1%>"></p>
    </td>
    <td width="20%">
      <p><input type="text" name="width30b2" size="12" value="<%=width30b2%>"></p>
    </td>
    <td width="20%">
     <p><input type="text" name="width30b3" size="12" value="<%=width30b3%>"></p>
    </td>
    <td width="20%">
    <p><input type="text" name="width30b4" size="12" value="<%=width30b4%>"></p>
    </td>
</tr>
</table>
<!--  end three forms here-->
<table border="1"  width="730" bgcolor="#dcdcdc">
      <tr><td>
      <table border="1" bgcolor="#dcdcdc" >
            <tr>
                  <td>
                        <Table border="0" bgcolor="#dcdcdc" width=400>
                        <tr>
                              <td>
                                    <tr><td width="40%"><basefont size=1>
                        <p>Shoes will ship to a store address only </p>
                                    </td>

                        </table>
                  </td>
            </tr>

      </td>

      </tr>
      </table>

//
0
 
b0lsc0ttIT ManagerCommented:
It looks like you figured out the problem.  The tabindex needs to be in an input.  My first example/comment was just very basic and probably caused the confusion.  Let me know if this was accidently closed and you still have a question.

Thank you for the grade, the points and the fun question.

bol
0
 
xuqnAuthor Commented:
Hi b0lsc0tt,
Thank you for your help, I got it, (actually I got it before thanksgiving), I was very happy to close it.
thank you.
xuqn
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I just wanted to make sure. :)

bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.