469,950 Members | 1,880 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,950 developers. It's quick & easy.

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.getElementById('tableID').style.backgroun dColor ="#000000";
document.getElementById('tableID').setAttribute ("border", 2);
document.getElementById('tableID').setAttribute(1, 1)

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

Thanking you,
Al.

Mar 14 '07 #1
3 2845
ASM
al*****@altavista.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.getElementById('tableID').style.backgroun dColor ="#000000";
document.getElementById('tableID').setAttribute ("border", 2);
document.getElementById('tableID').setAttribute(1, 1)
with down arrow

function hglg(e) {
var t = document.getElementById('tableID');
t.style.background='#ffc';
t.style.color='red';
t.style.border='1px solid black';
if(e.keyCode == '40') {
t.style.background='#000';
t.style.color='white';
t.style.border='2px solid yellow';
}
}

<body onkeypress="hglg(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.getElementsByTagName('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...@altavista.com" <almu...@altavista.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 colourNonHighlight = "#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.onkeyup = function (e) {
if (window.event) {
e = window.event;
}
switch(e.keyCode) {
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.getElementById(tableID);

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

// set all rows to non-highlighted
for (var i = 0;i<tbl.rows.length;i++)
tbl.rows[i].style.backgroundColor = colourNonHighlight;

// highlight current row
tbl.rows[currentRowIndex].style.backgroundColor = colourHighlight;
}
Mar 14 '07 #3
ASM
al*****@altavista.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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by cpliu | last post: by
2 posts views Thread by J Krugman | last post: by
15 posts views Thread by 50295 | last post: by
8 posts views Thread by dhnriverside | last post: by
6 posts views Thread by LU | last post: by
9 posts views Thread by Devron Blatchford | last post: by
2 posts views Thread by Sridhar | last post: by
17 posts views Thread by toffee | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.