[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Change class onFocus

Posted on 2006-05-05
6
Medium Priority
?
364 Views
Last Modified: 2012-05-05
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!
0
Comment
Question by:FirePits
  • 2
  • 2
  • 2
6 Comments
 
LVL 33

Expert Comment

by:hongjun
ID: 16620014
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
 
LVL 33

Expert Comment

by:hongjun
ID: 16620021
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
 
LVL 1

Author Comment

by:FirePits
ID: 16620038
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 7

Expert Comment

by:bubbledragon
ID: 16620043
use parentNode and change the TR className

onfocus="this.parentNode.parentNode.className='rowClassfocus'"
0
 
LVL 7

Accepted Solution

by:
bubbledragon earned 240 total points
ID: 16620053
<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
 
LVL 1

Author Comment

by:FirePits
ID: 16620069
Perfect, thanks bubble!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question