PDA

Click to See Complete Forum and Search --> : Highlite different rows when clicking button

marko_one
11-04-2003, 03:07 AM
Hi All,

I need to be able to put in place a pair of buttons which will move the highlighting of a table row's text when I click on the move up / down buttons.

So for instance if I have a table with 10 rows and I have a pair of buttons : eg. Move Up and Move Down. Initially all the text in the cells are Black apart from the first one which is Red. If I Click the move down button then I need a way to highlite the 2nd row by changing it to Red and changing the 1st row to Black effectively moving the highliting down the list. This will happen again for the other rows if I press Move Down, row 3 will change to red and row 2 will change to black. The same happnens in reverse If I press the move up button.

The amount of the rows will be dynamic so I don't think I can ID the td Cells.

Any Ideas?

Thanks

Marko.
Gollum
11-04-2003, 03:43 AM
this example should give you a few ideas...

<html>
<head>
<style>
.redRow
{
color: red;
}

.blackRow
{
color: black;
}

</style>
<script language="javascript">

function move(dir)
{
var oTable = document.getElementById('t1');

// find the red row
var i;
for ( i = 0; i < oTable.rows.length; i++ )
{
if ( oTable.rows[i].className == "redRow" )
{
oTable.rows[i].className = "blackRow";
break;
}
}

i += dir;
if ( i < 0 ) i = 0;
if ( i >= oTable.rows.length ) i = oTable.rows.length - 1;
oTable.rows[i].className = "redRow";
}

</script>
</head>
<body>
<table id=t1>
<tr class=redRow><td>1A</td><td>1B</td><td>1C</td></tr>
<tr class=blackRow><td>2A</td><td>2B</td><td>2C</td></tr>
<tr class=blackRow><td>3A</td><td>3B</td><td>3C</td></tr>
<tr class=blackRow><td>4A</td><td>4B</td><td>4C</td></tr>
<tr class=blackRow><td>5A</td><td>5B</td><td>5C</td></tr>
<tr class=blackRow><td>6A</td><td>6B</td><td>6C</td></tr>
<tr class=blackRow><td>7A</td><td>7B</td><td>7C</td></tr>
<tr class=blackRow><td>8A</td><td>8B</td><td>8C</td></tr>
</table>
<button onclick="move(-1);">Up</button><button onclick="move(1);">Down</button>
</body>
</html>
marko_one
11-04-2003, 04:41 AM
Than you Gollum, that's exactly what I wanted.