Using the up and down arrow keys to select a table row

buggs2012

2 New Member

Hi Guru’s

I need the help of an expert from this forum on my question below as it is well beyond the level of knowledge that I have for programming in JavaScript.

Given the existing JavaScript coding below, how can I piggy back and add onto the existing coding so as to add functionality for a user to use their up and down arrow keys to scroll through the table, while they are scrolling through (btw the header column exempt) it would highlight the selected row and change its row color.

A point to note that if an existing table row is selected, and I hit my up or down arrow key, it would just move to and highlight the previous and next row. Some logic here is that I am guessing that one would need to find the row index to do this. Like I said, it is well beyond what I know how to do.

Much thanks and a huge appreciation for all your help.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

tr.normal td {

    color: black;

    background-color: white;

}

tr.highlighted td {

    color: white;

    background-color: red;

}

</style>

</head>

<body>

<div id="results" class="scrollingdatagrid">

  <table id="mstrTable" cellspacing="0" border="1">

     <thead>

      <tr> 

        <th>File Number</th>

        <th>Date1</th>

        <th>Date2</th>

        <th>Status</th>

        <th>Num.</th>

      </tr>

    </thead>

    <tbody>

      <tr> 

        <td>KABC</td>

        <td>09/12/2002</td>

        <td>09/12/2002</td>

        <td>Submitted</td>

        <td>1</td>
 
      </tr>

      <tr> 

        <td>KCBS</td>

        <td>09/11/2002</td>

        <td>09/11/2002</td>

        <td>Lockdown</td>

        <td>2</td>

      </tr>
 
      <tr> 

        <td>WFLA</td>

        <td>09/11/2002</td>

        <td>09/11/2002</td>

        <td>Submitted</td>

        <td>3</td>

      </tr>

      <tr> 

        <td>WTSP</td>

        <td>09/15/2002</td>

        <td>09/15/2002</td>

        <td>In-Progress</td>

        <td>4</td>

      </tr>

    </tbody>

  </table>

</div>
 
<script type="text/javascript">

(

function() {

var trows = document.getElementById("mstrTable").rows;
 
    for (var t = 1; t < trows.length; ++t) {

        trow = trows[t];

        trow.className = "normal";

        trow.onclick = highlightRow;

    }//end for
 
    function highlightRow() {

        for ( var t = 1; t < trows.length; ++t ) {

            trow = trows[t];

            if (trow != this) { trow.className = "normal" }

        }//end for
 
        this.className = (this.className == "highlighted")?"normal":"highlighted";

      }//end function
 
  }//end function
 
)();//end script

</script>

</body>

</html>

Jul 25 '13 #1

Subscribe Reply

2700

Similar topics

1903

Design time -- can't move Label controls using arrow keys??

by: Rob R. Ainscough | last post by:

Has anyone else had this problem? I'm in GridLayout, if I add a new Label control and try to move/position it to the bottom page using the arrow keys it just stops at the bottom and doesn't let me move it more? Same with other controls -- they just don't move with arrow keys, but if I use the mouse they will position just fine. Is this a known issue with VS.2003 IDE? (VB.NET) Rob.

ASP.NET

5888

Arrow keys to navigate through a set of buttons?

by: Neil Wallace | last post by:

Hi there, I have an application in which a grid of 100 or more buttons are put on a form in columns of 10. All the buttons are within a panel. They are added in runtime, and so they adopt a sensible tab value. The tab key moves the focus down the column one by one, and the up and down arrow keys work well.

Visual Basic .NET

5514

Trapping arrow keys in UserControl

by: Vincent | last post by:

Hi, I have a user control that needs to trap the arrow keys to move items around internally. However, using the arrow keys will move the focus to another control on the form hosting the user control. How do I stop this? Vincent.

C# / C Sharp

3293

How can I get a custom control to react to arrow keys?

by: boopsboops | last post by:

Hi thescripts people, I hope I'm in the right forum for Visual Basic Dotnet (VS 2005). I am trying to make a custom control in which you can nudge a point around using the arrow keys. Actually, the control is meant to be a simple drawing program. To test it out I have put the control on a Windows form which also contains several buttons. I have added a KeyDown event handler to the custom control (see code below). It responds fine to keys...

.NET Framework

5437

Arrow keys and onkeypress

by: pazabo | last post by:

Hi, Does anybody know why doesn't onkeypress catch up/down arrow keys while it catches left/right arrows? My only supposition is that up/ down keys are used for moving between form elements, anyway does anybody know any solution to this problem? Thanks, Pazabo

Javascript

2879

Using up and down arrow keys in datagridview

by: Andrus | last post by:

I have combobox column in DataGridView. Up and down error keys should be used to navigate previous and next row in grid. For this I override them in ProcessCmdKey() event. When combobox dropdown menu is open arrow arrow keys should move to previous and next item in dropdown menu instead of moving betveen rows. How to check that combobox dropdown menu is open in ProcessCmdKey() ?

C# / C Sharp

5039

Using arrow keys (up/down) to navigate within a table

by: divingIn | last post by:

Hi, I have created a textbox like google suggest(or like yahoomail) that shows results using ajax as you type in. Now i am showing the results in a dynamic table under the textbox inside a div. But as the results how up i should be able to navigate them using up/down arrow keys. Using the mouse to click on a option is not very convenient since the results show up as you type. How can i achieve this? Any help would be appreciated. TIA

Javascript

4445

DateTimePicker - Disable user from using arrow keys?

by: Artie | last post by:

Hi, I want to force the user to only use the drop down and calendar to select a date in the DatetimePicker control. I do NOT want them to select the control, then use the up and down arrow keys to change the date. How can I prevent them using the arrow keys?

C# / C Sharp

4064

C#-APP: Disable arrow keys on tabcontrol

by: theleshie | last post by:

In the windows application I am developing, I'm trying to prevent users from using the arrow keys on the keyboard to navigate through the tabpages on a tabcontrol. Is anyone aware of a way to do this?

.NET Framework

3556

arrow keys through list of div cursor links

by: cantrell78 | last post by:

I'm dynamically building a list of divs that a user can click and sets off an action. I was hoping to build into it a way to use the up and down arrow keys to navigate the list and the enter key to select the one that is focused - any idea how I could achieve this? it's basically this: <div style="cursor:pointer; cursor:hand;" onClick="return callAction('1')">item 1</div> <div style="cursor:pointer; cursor:hand;" onClick="return

Javascript

9591

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9425

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10225

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10053

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10001

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8880

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7415

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5312

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

2816

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General