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!
LVL 1
FirePitsAsked:
Who is Participating?
 
bubbledragonConnect With a Mentor Commented:
<script>
function change(obj, ClassName) {
       obj.parentNode.parentNode.className = ClassName;
}
</script>

<style>
.rowClass {
      background-color: #0000EE;
}
.rowClassfocus {
      background-color: #00EE00;
}
</style>

<table>
<tr class="rowClass"><td>First Name:</td><td><input type="textbox" name="fName" onfocus="change(this,'rowClassFocus')" onblur="change(this,'rowClass')" ></td></tr>
<tr class="rowClass"><td>First Name:</td><td><input type="textbox" name="fName" onfocus="change(this,'rowClassFocus')" onblur="change(this,'rowClass')" ></td></tr>
<tr class="rowClass"><td>First Name:</td><td><input type="textbox" name="fName" onfocus="change(this,'rowClassFocus')" onblur="change(this,'rowClass')" ></td></tr>
</table>
0
 
hongjunCommented:
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>
0
 
hongjunCommented:
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>
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
FirePitsAuthor Commented:
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.
0
 
bubbledragonCommented:
use parentNode and change the TR className

onfocus="this.parentNode.parentNode.className='rowClassfocus'"
0
 
FirePitsAuthor Commented:
Perfect, thanks bubble!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.