Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

Javascript / Client Side Development

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.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.

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)

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 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;

almu@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.fr/truc/tables_highlight_rows
http://stephane.moriaux.perso.orange.fr/truc/tables_highlight_cells

--
Stephane Moriaux et son (moins) vieux Mac dj dpass
Stephane Moriaux and his (less) old Mac already out of date

Add to del.icio.us | Digg this | Stumble it | Powered by Megasolutions Inc