almu@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.backgroundColor ="#000000";
> document.getElementById('tableID').setAttribute ("border", 2);
> document.getElementById('tableID').setAttribute(1, 1)
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 dj dpass
Stephane Moriaux and his (less) old Mac already out of date
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;
}
Add to del.icio.us |
Digg this |
Stumble it |
Powered by Megasolutions Inc
