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
