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

almurph · Mar 14, 2007

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.backgroundColor ="#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.

ASM · Mar 14, 2007

(e-mail address removed) 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)

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.onclick = function(){ hl(this);};
}

function hl(what) { // hightlighter function
// all TDs without class
for(var i=0; i<T.length; i++) T.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>

wisestpotato · Mar 14, 2007

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.style.backgroundColor = colourNonHighlight;

// highlight current row
tbl.rows[currentRowIndex].style.backgroundColor = colourHighlight;
}

ASM · Mar 14, 2007

(e-mail address removed) 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.fr/truc/tables_highlight_rows
http://stephane.moriaux.perso.orange.fr/truc/tables_highlight_cells

How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
How to add a className to an object in array in js?	1	Dec 7, 2021
How to save textBox values into a xml-file(with naming an choosing directory)?	1	Aug 23, 2022
dynamically adding a row to a table (portability issue)	7	Dec 15, 2009
Help with my responsive home page	2	Dec 14, 2022
How to stop an animated image from sticking to top of page?	2	Feb 17, 2022
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
interactive table - please help	1	Feb 3, 2007

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

almurph

ASM

wisestpotato

ASM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads