By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,651 Members | 1,727 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,651 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
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

P: n/a
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.