Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Go to a particular row in an html table based on the letter typed 2

Status
Not open for further replies.
Lokoono

Lokoono

Programmer
Jun 13, 2007
34
US
Below is the code I have which simulates an Access list box by using Javascript and "faking" the listbox by using an html table instead.

My Questions:

Is there a way I can further simulate the Access listbox feature by having the html table scroll to a cell (the first cell, which is the name of an employee) and select that cell?

And if that technique is possible, once that letter is typed again, can it also go to the next employee whose first name also starts with that letter (if there is a next one)?

Again, I just want to do this based on the first letter that's in the first cell of a row.


I know my question is probably very unusual and maybe not even possible for a solution, but I'm working on an HTA project which uses this very useful Javascript code and I just wanted to make the listbox easier to navigate since there are a lot of employees in my department.

I appreciate any help that can be given. And if you ahve any questions, just let me know. Thanks!

Code: 
<HTML>
<HEAD>

<script language="JavaScript">
var highlight = "#000066";
    var aSelected = new Array;
    function setRow(obj)
    {
      //Reset all rows
      var rows = document.getElementsByTagName("tr");
      for (var i = 0; i < rows.length; i++){
        rows[i].style.backgroundColor = "";
	rows[i].style.color = "black";  //      <----------
        
      }
      //Highlight the selected row
      if (obj.style.backgroundColor == "#000066")
        obj.style.backgroundColor = "white";
	else
        obj.style.backgroundColor = highlight;
        obj.style.Color = "white";

if (obj.style.backgroundcolor = "#000066")
   obj.style.color="#ffffff";

     
      document.getElementById("ID").value = obj.getElementsByTagName('td')[2].innerHTML;
    }

function DemoAccess()
{
    var oConn, oRs, sSQL, sConnectionString;
    oConn = new ActiveXObject("ADODB.Connection")
    
    sConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source='R:/Scott/Databases/New.mdb';User Id=admin;Password=;"

    oConn.Open(sConnectionString)

    sSQL = "SELECT tblEmployees.EmployeeName, tblEmployees.Extension, tblEmployees.UserID FROM tblEmployees ORDER BY tblEmployees.EmployeeName;"


    oRs = oConn.Execute(sSQL)

    PrepareTableHTML("<table border=0 cellspacing=0 cellpadding=0 width=325px;>")
    PrepareTableHTML("\n")

    PrepareTableHTML("<tr onclick='setRow(this);'>")
    for (i = 0 ; i < oRs.Fields.Count ; i++)
    PrepareTableHTML("</tr>")
    PrepareTableHTML("\n")

    while (! oRs.EOF)
    {
        PrepareTableHTML("<tr onclick='setRow(this);'>")
        for (i = 0 ; i < oRs.Fields.Count ; i++)
        {
            PrepareTableHTML("<td>")
            PrepareTableHTML(NullToNull(oRs.Fields(i).Value))
            PrepareTableHTML("</td>")
        }
        PrepareTableHTML("</tr>")
        PrepareTableHTML("\n")

        oRs.MoveNext()
    }
    PrepareTableHTML("</table>")
    PrepareTableHTML("\n")

    oRs.Close()
    oConn.Close()
    WriteTableHTMLToDiv()

    oConn = null
    oRs = null
}

var TableHTML = "";

function PrepareTableHTML(sString)
{
    TableHTML += sString;
}

function WriteTableHTMLToDiv()
{
    document.getElementById("MyDiv").innerHTML = TableHTML;
}

function NullToNull(sValIn)
{
    var sValOut, sNull

    sNull = "<font color=lightgrey>Null</font>";

    if (sValIn == null)
    {
        sValOut = sNull;
    }
    else
    {
        sValOut = sValIn
    }

    return sValOut
}
</script>

</HEAD>

<BODY onload="DemoAccess()">
<div style="overflow-X:hidden;overflow-Y:auto;height:85px;width:246px;border: #000000 solid 2px;">
<div id="MyDiv">
</div>
</div>
<input type="hidden" id="ID" /></span>

</BODY>

</HTML>
 
Sort by date Sort by votes
Thanks for the tips Feherke

Although I'm now able to trap A through Z when those keys are pressed when the table has focus, I can't get the scrollIntoView feature to work. I've been trying for the last few hours to get it to work, but I've had no luck.

I've found an example that works if my TRs had IDs, but since my TRs are created dynamically, they don't have individual IDs. Therefore, this example I found doesn't exactly work in my case. The table is the only element on my script that can have an ID, so I don't know if I can use that instead to reference the first column of the table to work with scrollIntoView. Here's the example I'm talking about (that uses TR IDs):



The code I'm using to trap the letters is:

Code: 
function keystyped() {
if (event.keyCode > 64 && event.keyCode < 91)
'......this is where the scrollIntoView code would go
}


And I changed the line in my original code to say:

Code: 
PrepareTableHTML("<table border=0 cellspacing=0 cellpadding=0 width=325px; onKeyPress='keystyped'>")

Any further help would be appreciated.
 
Upvote 0 Downvote
Hi

There is absolutely no need for [tt]id[/tt].

Something like this should work :
Code: 
var t=document.getElementById('theTablesID')

for (var i=0,l=t.rows.length;i<l;i++) {
  if (t.rows[i].cells[0].innertHTML.substr(0,1)==thePressedLetter) {
    t.rows[i].scrollIntiView()
    break
  }
}

Feherke.
 
Upvote 0 Downvote
Feherke,

I'm not trying to get you to do all the work for me here and I'm sorry if it's turning out to be that way. My area of expertise is VB Script and not Javascript. I couldn't find anything on how to do a scrollIntoView type of routine for VB Script, so I tried Javascript.

I'll give you all the thanks (via a star) in the world even if this latest problem can't be figured out because you've at least got me a lot closer to a solution than I was.


I used this code for my OnKeyPress function:

Code: 
function keystyped() {

if (event.keyCode > 64 && event.keyCode < 91)

var t=document.getElementById('mytable')

for (var i=0,l=t.rows.length;i<l;i++) {
if (t.rows[i].cells[0].innertHTML.substr(0,1)==String.fromCharCode(event.keyCode)) {
    t.rows[i].scrollIntoView()
    break
  }
}
}


...and now I'm getting a runtime error of:

1. 'rows[...].cells.0.innerHTML' is null or not an object

I don't know if I'm missing some dots or parenthesis or something else in the code or not. I checked the name of my table and it's correct.

Thanks.
 
Upvote 0 Downvote
Failing that (the 't' may have crept in when pasting the code), these might help:

I checked the name of my table and it's correct.
Click to expand...

You should ensure the ID is set, because you are using 'getElementById', not 'getElementsByName'.

If you have an ID, put an alert after the "t=..." line:

Code: 
alert(t);

If you see an object retuned, you can rule out that line, but change the alert to:

Code: 
alert(t.rows.length);

This will ensure you are looking at a table with some rows in it.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi Dan,

Thanks for the response.

#1. The innerHTML line was mispelled, but wasn't the solution to the problem

#2. The alert(t) code did return an object (it would've been null otherwise I'm guessing)

#3. The alert(t.rows.length) returned the number 43 (which is the number of rows in my table).

You did at least get rid of my fears that the t.rows.length wasn't even finding my table. It is, so that's not the problem.

If this helps, I'm including the entire code for this simulated listbox as it stands now. I have a Access 2003 database table with 3 columns in it, which this code returns and works great with until I try typing a letter.

Code: 
<HTML>
<HEAD>

<script language="JavaScript">
var highlight = "#000066";
    var aSelected = new Array;
    function setRow(obj)
    {
      //Reset all rows
      var rows = document.getElementsByTagName("tr");
      for (var i = 0; i < rows.length; i++){
        rows[i].style.backgroundColor = "";
	rows[i].style.color = "black";  //      <----------
        
      }
      //Highlight the selected row
      if (obj.style.backgroundColor == "#000066")
        obj.style.backgroundColor = "white";
	else
        obj.style.backgroundColor = highlight;
        obj.style.Color = "white";

if (obj.style.backgroundcolor = "#000066")
   obj.style.color="#ffffff";

     
      document.getElementById("ID").value = obj.getElementsByTagName('td')[2].innerHTML;
    }

function DemoAccess()
{
    var oConn, oRs, sSQL, sConnectionString;
    oConn = new ActiveXObject("ADODB.Connection")
    
    sConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source='R:/Scott/Databases/New.mdb';User Id=admin;Password=;"

    oConn.Open(sConnectionString)

    sSQL = "SELECT tblAssocResponsibility.AssocName, tblAssocResponsibility.Extension, tblAssocResponsibility.UserID FROM tblAssocResponsibility ORDER BY tblAssocResponsibility.AssocName;"


    oRs = oConn.Execute(sSQL)

    PrepareTableHTML("<table border=0 cellspacing=0 cellpadding=0 width=325px; onKeyup='trythis()' id='mytable'>")
    PrepareTableHTML("\n")

    PrepareTableHTML("<tr onclick='setRow(this);'>")
    for (i = 0 ; i < oRs.Fields.Count ; i++)
    PrepareTableHTML("</tr>")
    PrepareTableHTML("\n")

    while (! oRs.EOF)
    {
        PrepareTableHTML("<tr onclick='setRow(this);' height='20'>")
        for (i = 0 ; i < oRs.Fields.Count ; i++)
        {
            PrepareTableHTML("<td>")
            PrepareTableHTML(NullToNull(oRs.Fields(i).Value))
            PrepareTableHTML("</td>")
        }
        PrepareTableHTML("</tr>")
        PrepareTableHTML("\n")

        oRs.MoveNext()
    }
    PrepareTableHTML("</table>")
    PrepareTableHTML("\n")

    oRs.Close()
    oConn.Close()
    WriteTableHTMLToDiv()

    oConn = null
    oRs = null
}

var TableHTML = "";

function PrepareTableHTML(sString)
{
    TableHTML += sString;
}

function WriteTableHTMLToDiv()
{
    document.getElementById("MyDiv").innerHTML = TableHTML;
}

function NullToNull(sValIn)
{
    var sValOut, sNull

    sNull = "<font color=lightgrey>Null</font>";

    if (sValIn == null)
    {
        sValOut = sNull;
    }
    else
    {
        sValOut = sValIn
    }

    return sValOut
}

function trythis() {

if (event.keyCode > 64 && event.keyCode < 91) {
var t=document.getElementById('mytable')

for (var i=0,l=t.rows.length;i<l;i++) {
if (t.rows[i].cells[0].innerHTML.substr(0,1)==String.fromCharCode(event.keyCode)) {
    t.rows[i].scrollIntoView()
    break
  }
}
}
}
</script>

</HEAD>

<BODY onload="DemoAccess()">
<div style="overflow-X:hidden;overflow-Y:auto;height:85px;width:246px;border: #000000 solid 2px;">
<div id="MyDiv">
</div>
</div>
<input type="hidden" id="ID" /></span>

</BODY>

</HTML>


Thanks again.
 
Upvote 0 Downvote
Okay, I think I lucked out (with feherke and Dan's help of course)....


I changed:

for (var i=0,l=t.rows.length;i<l;i++) {

to

for (var i=1,l=t.rows.length;i<l;i++) {

And then with this line, I added two lines underneath:
t.rows.scrollIntoView()
t.rows.style.backgroundColor = "#000066";
t.rows.style.color="white";

To make it perfect, I'll need to figure out a way to have it continue to the next instance of that letter (if there is one). I think I saw something on tek-tips earlier that can do this and I'll work on it. If I find the solution, I'll post it and that'll be the end of this question.


Thanks a bunch guys!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
343
malpa
malpa
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
333
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
375
xwb
xwb
BobMe23
What new features have appeared in the latest versions of Java?
Replies
1
Views
84
feherke
feherke
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
399
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top