asked on

Change class onFocus

I have a simple table structure and would like to change the class of the row when the textbox within a cell is focused on.

<table>
<tr class="rowClass"><td>First Name:</td><td><input type="textbox" name="fName"></td></tr>
</table>

When fName is clicked on I want to change the <tr> class.

Any help is appreciated!

hongjun

Try something like this

<script>
function fun() {
document.getElementById('myRow').className = "AnotherRowClass";
}
</script>

<table>
<tr id="myRow" class="rowClass">
<td>First Name:</td>
<td><input type="textbox" name="fName" onfocus="fun()"></td>
</tr>
</table>

hongjun

Or you can even change back to the rowClass when you lost focus it

<script>
function fun(state) {
// onfocus
if ( state == 1 )
document.getElementById('myRow').className = "AnotherRowClass";
// onblur
else if ( state == 2 )
document.getElementById('myRow').className = "rowClass";
}
</script>

<table>
<tr id="myRow" class="rowClass">
<td>First Name:</td>
<td><input type="textbox" name="fName" onfocus="fun(1)" onblur="fun(2)"></td>
</tr>
</table>

FirePits

ASKER

I have multiple rows, so that won't work unless I can pass the row id to the function. With the research I've been doing, I think I need to somehow reference the parentNode property.

bubbledragon

use parentNode and change the TR className

onfocus="this.parentNode.parentNode.className='rowClassfocus'"

ASKER CERTIFIED SOLUTION

bubbledragon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

FirePits

ASKER

Perfect, thanks bubble!