Count number of rows in table that start with a certain letter 1

[Lokoono]

I'm almost done with my quest to make a simulated Access listbox in hta by using javascript and a table. The code below works to have the table scroll to and highlight the first row where that letter shows up. In other words, if there's "Sam" and "Susan" in the column, it will always go to "Sam" when the 'S' key is pressed.

I've spent the better part of the day trying to find javascript code that counts the number of rows in the table that start with the "pressed" key, but I have had no luck. I want to do this so the user can keep pressing a certain key and scroll through all the rows that start with that letter (so hit "S" twice and go from Sam to Susan).

And if the letter doesn't exist in the table, I wouldn't want anything to happen (the same row that's currently highlighted stays highlighted if the letter isn't found).

I appreciate the help. Again, I have searched on tek-tips. Other than determining that a rows.length type of filter would need to be done, I don't know how to incorporate it.

function keystyped() {

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

var rows = document.getElementsByTagName("tr");
      for (var i = 0; i < rows.length; i++){
        rows[i].style.backgroundColor = "";
	rows[i].style.color = "black";  //      <----------
        
      }

var t=document.getElementById('mytable')
for (var i=1,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()
 t.rows[i].style.backgroundColor = "#000066";
 t.rows[i].style.color="white";
    break
  }

}
}
}

Thanks again.

 

[feherke]

Hi

I would say, there is no need to count the rows.

function keystyped(e)
{
  var code=window.event?window.event.keyCode:e.which
  var letter=String.fromCharCode(code)

  if (!letter.match(/^[a-z]$/i)) return

  if (prevletter!=letter) {
    prevletter=letter
    prevcount=0
  } else prevcount++

  var t=document.getElementById('mytable')

  var count=0
  for (var i=1,l=t.rows.length;i<l;i++) {
    if (t.rows[i].cells[0].innerHTML.substr(0,1)==letter) {
      if (count==prevcount) {
        if (prevrow) with (prevrow) {
          prevrow.style.backgroundColor='';
          prevrow.style.color='black';
        }
        with (prevrow=t.rows[i]) {
          prevrow.scrollIntoView()
          prevrow.style.backgroundColor='#000066';
          prevrow.style.color='white';
        }
        break
      } else count++
    }
  }

}

var prevrow=undefined,prevletter=undefined,prevcount=0

document.onkeypress=keystyped

Feherke.

http://rootshell.be/~feherke/

 

[Lokoono]

Hi feherke,

Your code works in getting to the next letter. Thanks very much for that.

I'm going to see if I can tweak it because if, for instance, I hit the "S" key and it scrolls through all the "S" names, it will cause the table to lose focus and it won't go back to the start of where the "S" names started. It doesn't allow the "S" key to be used again (the table just stays unfocused if its typed again) unless I refresh the screen or type another letter and then type "S" again.


Your code definitely has me going in the right direction and I'm very grateful. Thanks again for all your help.

If I figure out the tweaks, I'll post it in this thread.

 

[feherke]

Hi

In thread216-1525001 you mentioned this :

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

Why you bound the event handler to the [tt]table[/tt] and not to the whole [tt]document[/tt] ? In my test page I experienced no such problem. ( Well, I tested with FireFox only. )

Feherke.

http://rootshell.be/~feherke/

 

[Lokoono]

Hmmm, good question. There's something I forgot to mention at the beginning. The table isn't the only table or listbox in the document. This table is part of a larger data entry form that I'm designing for my office's intranet (the rest of the form I've had no problem with since its in vbscript...and yep, everyone in my office uses Internet Explorer only).

I have a normal listbox in the document as well (which is predefined through the browser). Wouldn't setting the onkeypress for the document to control the table cause some confusion since the listbox is also on the form?

Having the table clicked on with the mouse (or focused through tab keys) is fine with my users in order for them to control the keypress then.

Thanks for thinking about it though. Whenever I have a form that only has one table or listbox, I'll remember your tip.

 

[feherke]

Hi

Got it. That explains the why.

Feherke.

http://rootshell.be/~feherke/