Solved

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

Posted on 2006-11-21
7
258 Views
Last Modified: 2010-04-16
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
0
Comment
Question by:xuqn
  • 4
  • 3
7 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17990637
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
 

Author Comment

by:xuqn
ID: 17990932
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
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 17991119
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:xuqn
ID: 17995356
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18000614
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
 

Author Comment

by:xuqn
ID: 18022203
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18022234
Your welcome!  I just wanted to make sure. :)

bol
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
scoresClump  challenge 31 108
countX 22 70
python sqlite question 11 43
Tviruailstringtree sort multi columns on header click 1 31
This is an explanation of a simple data model to help parse a JSON feed
A short article about problems I had with the new location API and permissions in Marshmallow
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now