473,718 Members | 1,928 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to highlight an item in a table...please help

Hi,

I'm a newbie to Javascript. I can;t even finf a full API for it!
Anyway I have a table structure and when a user presses the down-arrow
button the item in said table is meant to be highlighted.

Here is the code that I have so far:

document.getEle mentById('table ID').style.back groundColor ="#000000";
document.getEle mentById('table ID').setAttribu te ("border", 2);
document.getEle mentById('table ID').setAttribu te(1, 1)

Ques: How do I make an item in the list become highlighted?

Thanking you,
Al.

Mar 14 '07 #1
3 3011
ASM
al*****@altavis ta.com a écrit :
>
when a user presses the down-arrow
button the item in said table is meant to be highlighted.

Here is the code that I have so far:

document.getEle mentById('table ID').style.back groundColor ="#000000";
document.getEle mentById('table ID').setAttribu te ("border", 2);
document.getEle mentById('table ID').setAttribu te(1, 1)
with down arrow

function hglg(e) {
var t = document.getEle mentById('table ID');
t.style.backgro und='#ffc';
t.style.color=' red';
t.style.border= '1px solid black';
if(e.keyCode == '40') {
t.style.backgro und='#000';
t.style.color=' white';
t.style.border= '2px solid yellow';
}
}

<body onkeypress="hgl g(event);">
Ques: How do I make an item in the list become highlighted?

the easiest way is to have a reserved css class for hightlighting

CSS :
=====
table { width: 100% }
..hl { background: #000; border-width: 2px; color: white }
td { background: #ffc; border: 1px solid orange; color: maroon;
text-align: center; cursor: pointer;}

JS :
====
// to get collection of TDs in the page
onload = function() {
T = document.getEle mentsByTagName( 'TD');
// to give onclick at each TD
for(var i=0; i<T.length; i++) T[i].onclick = function(){ hl(this);};
}

function hl(what) { // hightlighter function
// all TDs without class
for(var i=0; i<T.length; i++) T[i].className = '';
// 'what' or this TD with class 'hl'
what.className = 'hl';
}

HTML:
=====
<table>
<tr><td>test 1</td><td>test 2</td><td>test 3</td></tr>
<tr><td>test 4</td><td>test 5</td><td>test 6</td></tr>
</table>
for a newbie :

<html>
<table border=2 width="100%">
<tr>
<td onclick="var s = this.style;
s.background='# 000'; s.color='white' ;">
test 1
</td>
<td onclick="var s = this.style;
s.background='# 000'; s.color='white' ;">
test 2
</td>
<td onclick="var s = this.style;
s.background='# 000'; s.color='white' ;">
test 3
</td>
</tr>
<tr>
<td onclick="var s = this.style;
s.background='# 000'; s.color='white' ;">
test 4
</td>
<td onclick="var s = this.style;
s.background='# 000'; s.color='white' ;">
test 5
</td>
<td onclick="var s = this.style;
s.background='# 000'; s.color='white' ;">
test 6
</td>
</tr>
</html>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 14 '07 #2
On 14 Mar, 10:17, "almu...@altavi sta.com" <almu...@altavi sta.com>
wrote:
Anyway I have a table structure and when a user presses the down-arrow
button the item in said table is meant to be highlighted.
Try the following javascript. This will start off by highlighting the
first row in the table. You can then move the highlight up and down
using the up and down arrow keys.

var currentRowIndex = 0; // current highlighted row
var colourHighlight = "#c8fa63"; // background colour of
highlighted row
var colourNonHighli ght = "#ffffff"; // background colour of non-
highlighted row
var tableID = "table1"; // ID of table

window.onload = function () {
// highlight the first row in the table
highlightRow();

// create event handler to process keypress events
document.onkeyu p = function (e) {
if (window.event) {
e = window.event;
}
switch(e.keyCod e) {
case 40: // down arrow pressed
currentRowIndex ++;
break;
case 38: // up arrow pressed
currentRowIndex--;
break;
}
highlightRow();
}
}

// highlight the row specified by currentRowIndex
function highlightRow() {
var tbl = document.getEle mentById(tableI D);

// check that currentRowIndex isn't outside the bounds of the table
if (currentRowInde x>(tbl.rows.len gth-1)) currentRowIndex =
tbl.rows.length-1;
if (currentRowInde x<0) currentRowIndex = 0;

// set all rows to non-highlighted
for (var i = 0;i<tbl.rows.le ngth;i++)
tbl.rows[i].style.backgrou ndColor = colourNonHighli ght;

// highlight current row
tbl.rows[currentRowIndex].style.backgrou ndColor = colourHighlight ;
}
Mar 14 '07 #3
ASM
al*****@altavis ta.com a écrit :
>
I'm a newbie to Javascript. I can;t even finf a full API for it!
Anyway I have a table structure and when a user presses the down-arrow
button the item in said table is meant to be highlighted.
with onclick :

http://stephane.moriaux.perso.orange...highlight_rows
http://stephane.moriaux.perso.orange...ighlight_cells
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 14 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2894
by: cpliu | last post by:
I have a page with 3 frames. The left one is the navigation, the top one is the graphic and title, the lower-right one is the content area. I'm wondering if it's possible to add a highlight to the menu item that its content is currently displayed in the right side. Since it's only 1 file for the navigation, it has to know what was clicked last and use a highlight graphics for that button after it was clicked or be able to detect its...
2
4943
by: J Krugman | last post by:
I have set up an HTML table with clickable cells (the cells contain only text). They work fine, but I would like to give the user some visual feedback to indicate that a cell has been clicked. I'd like this feedback to be the usual highlight on mouseDown, un-highlight on mouseUp, but I can't figure out how to do it. Help? Thanks in advance! jill --
15
2190
by: 50295 | last post by:
Hi everyone, This one is better experienced than explained, so I'm including a code sample below. Please and save (as an html file) and view with NN or Firefox (or maybe even Mozilla), and then view. When loaded: (1.) Place the mouse over "Top Menu" item. (The menu opens) (2.) Move to any of the sub-menu items. (3.) Click on the left or right (but NOT on the text) of the current
1
1989
by: Not Me | last post by:
Hey, In our database, we have implemented auditing simply by holding a copy of each row of the specific table at any time that data is updated. This gives us a long list of full records, often with only one change between them. Not sure if there's a better way to do this, but we'd like to somehow highlight whichever record was changed by comparing each row with the next (in date order).
8
3444
by: dhnriverside | last post by:
Hi I'm using an asp:repeater and its DataSource/DataBind system to show a number of records from the database. I want to highlight the latest record (which will be the highest ID). Any thoughts on how to do this with the repeater? Cheers
6
3439
by: LU | last post by:
A)I build a datagrid based on a calendar date selection. B)When user clicks a button column on the datagrid I want to highlight this row. I use the code below to highlight the row. ***** CODE TO HIGHLIGHT ROW Sub Datagrid_ItemCommand(ByVal s As Object, ByVal e As DataGridCommandEventArgs) If e.CommandName = "ViewUnitRequest" Then e.Item.BackColor = System.Drawing.Color.LightGray
9
3047
by: Devron Blatchford | last post by:
Hi there, Just wondering if I change the back and fore colour of a listview item when the mouse hovers over it? I want to overide the default windows colour. Can someone please tell me how to do this? Thanks Devron
2
2080
by: Sridhar | last post by:
Hi, I have a datagrid which contains 3 columns. Two of them are Bound Column types and the third one is Button Column. When I click on one of the rows in that Button Column, I would like to highlight that row. I have already set the SelectedItemStyle property in the designer But I am knowing when it will work. It is not highlighting the row. If I highlight the row inside the datagrid1_ItemCommand event using e.Item.BackColor =...
17
3381
by: toffee | last post by:
Hi all, I have a table with 12 cols and 10 rows. When a user clicks on a table cell; the page is refreshed and displays some data below the table dependant on whichever cell was selected. I would like to make it so that whichever cell was clicked; the background color is changed - so that when the user sees the data, (s)he can tell which cell it relates to. Does anyone know of a clever way to do this ?
0
8827
marktang
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...
0
8722
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,...
0
9206
jinu1996
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...
0
7985
agi2029
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...
1
6652
isladogs
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...
0
5971
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4740
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2550
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2122
bsmnconsultancy
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.