Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Changing tr color with event listener

    How can i do that everytime there is a mouseover event in a table, the row which i mouseover on changes its color?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Code:
    var therows=document.getElementById("mytable").rows;
    for (var i = 0; i < therows.length; i++) {
    therows[i].onmouseover=function(){
    this.style.backgroundColor="red";
    	}
    therows[i].onmouseout=function(){
    this.style.backgroundColor="white";
    	}
    }

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    var therows=document.getElementById("mytable").rows;
    for (var i = 0; i < therows.length; i++) {
    therows[i].onmouseover=function(){
    this.style.backgroundColor="red";
    	}
    therows[i].onmouseout=function(){
    this.style.backgroundColor="white";
    	}
    }
    Thnx man but it doesn't working. And i also prefer to do it with event listener.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    it works provided you give your table an id of "mytable"

    if you would prefer to attach listeners, simply pass the row object to your code that attaches them, in the loop (and make sure you account for cross-browser concerns), like so...

    Code:
    <head>
    <style>
    td{width:30%}
    </style>
    
    </head>
    
    <body>
    
    <table id="mytable" width="75%" border="1">
      <tr>
        <td>Name</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Age</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Job</td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <script>
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
    var eProp = type + fn;
    ob['e'+eProp] = fn;
    ob[eProp] = function(){ob['e'+eProp]( window.event );};
    ob.attachEvent( 'on'+type, ob[eProp]);
    };
    
    var therows=document.getElementById("mytable").rows;
    for (var i = 0; i < therows.length; i++) {
    addEvent(therows[i],'mouseover',function(){this.style.backgroundColor="red"});
    addEvent(therows[i],'mouseout',function(){this.style.backgroundColor="white"});
    }
    </script>
    </body>
    Last edited by xelawho; 10-08-2012 at 03:43 PM. Reason: added example

  • Users who have thanked xelawho for this post:

    Piece Of Meat (10-09-2012)

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thnx but i a little bit confused. I need all my javascript to be on external file.
    This is my javascriptfile:
    Code:
    function addLoadListener(fn)
    {
      if (typeof window.addEventListener != 'undefined')
      {
        window.addEventListener('load', fn, false);
      }
      else if (typeof document.addEventListener != 'undefined')
      {
        document.addEventListener('load', fn, false);
      }
      else if (typeof window.attachEvent != 'undefined')
      {
        window.attachEvent('onload', fn);
      }
    };
    function attachEventListener(target, eventType, functionRef, capture)
    {
      if (typeof target.addEventListener != "undefined")
      {
        target.addEventListener(eventType, functionRef, capture);
      }
      else 
      {
        target.attachEvent("on" + eventType, functionRef);
      }
      return true; 
    };
    function  validateForm()
    {
    	 attachEventListener(document.getElementById('addform'), "submit", validateadd, false);
    	 function validateadd()
    	 {
    		 return checking('addfirst','addlast','addmail','addnumber');
    	 }
    	 attachEventListener(document.getElementById('editform'), "submit", validateedit, false);
    	 function validateedit()
    	 {
    		 return checking('editfirst','editlast','editmail','editnumber');
    	 }
    };
    function checking(first, last, mail, number)
    {
    	 var firstvalue=document.getElementById(first).value;
    	 var lastvalue=document.getElementById(last).value;
    	 var mailvalue=document.getElementById(mail).value;
    	 var numbervalue=document.getElementById(number).value;
    	 var shtrodel=0;
    	 var error=0;
    	 var dot=0;
    	 //firstname validation
    	 for (counter=0;counter<firstvalue.length;counter++)
    	 {
    	     if(!(firstvalue.charAt(counter)>='a' && firstvalue.charAt(counter)<='z')&&!(firstvalue.charAt(counter)>='A' && firstvalue.charAt(counter)<='Z')
    			 &&firstvalue.charAt(counter)!=' ')
    		 {
    			 alert ("First name must contain only letters!")
    			 return false;
    		 }
    	 }
    	 firstvalue=capitaliseFirstLetter(firstvalue);
    	 document.getElementById(first).value=firstvalue;
         //lastname validation
    	 for (counter=0;counter<lastvalue.length;counter++)
    	 {
    		 if(!(lastvalue.charAt(counter)>='a' && lastvalue.charAt(counter)<='z')&&!(lastvalue.charAt(counter)>='A' && lastvalue.charAt(counter)<='Z')
    			 &&lastvalue.charAt(counter)!=' ')
    		 {
    			 alert ("Last name must contain only letters!")
    			 return false;
    		 }
    	 }	 
    	 lastvalue=capitaliseFirstLetter(lastvalue);
    	 document.getElementById(last).value=lastvalue;
    	 //mail validation
    	 for (counter=0;counter<mailvalue.length;counter++)
    	 {
    		 if(!(mailvalue.charAt(counter)>='a' && mailvalue.charAt(counter)<='z')&&!(mailvalue.charAt(counter)>='A' && mailvalue.charAt(counter)<='Z')
    			 &&!(mailvalue.charAt(counter)>='0'&&mailvalue.charAt(counter)<='9')
    			 && mailvalue.charAt(counter)!='_' && mailvalue.charAt(counter)!='-' && mailvalue.charAt(counter)!='.' && mailvalue.charAt(counter)!='@')
    		 {	 
    			 error=1;
    		 }
    		 if(mailvalue.charAt(counter)=='@')
    		 {
    			 shtrodel++;
    		 }	 
    		 if(mailvalue.charAt(counter)=='.')
    		 {
    			 dot++;
    		 }	 
    	 }	 
    	 if (error==1)
    	 {
    		 alert("Illegal e-mail adress: The adress should contain only letters, '-', '_' or '.'");
    		 return false;
    	 }
    	 if (dot==0)
    	 {
    		 alert("Illegal e-mail adress");
    		 return false;
    	 }
    	 if (shtrodel==0)
    	 {
    		 alert("Illegal e-mail adress: The adress must contain @");
    		 return false;
    	 }
    	 else if (shtrodel>1)
    	 {
    		 alert("Illegal e-mail adress: The adress must contain only one '@'");
    		 return false;
    	 }
    	 //number validation
    	 for (counter=0;counter<numbervalue.length;counter++)
    		 {
    			 if(!(numbervalue.charAt(counter)>='0'&&numbervalue.charAt(counter)<='9'))
    			 {
    				 alert("Illegal phone number: The phone number must contain only numbers!");
    				 return false;
    			 }
    		 }
    		 if (numbervalue.length<8)
    		 {
    			 alert("The phone number is too short");
    			 return false;
    		 }
    		 else if (numbervalue.length>12)
    		 {
    			 alert("The phone number is too long");
    			 return false;
    		 }
    		 return true;	 
    };
    function capitaliseFirstLetter(string)
    {
         return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    
    addLoadListener(validateForm);
    Where should i put all the javascript code you wrote?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    being that you already have an an attachEventListener function, you can just call that:

    Code:
    var therows=document.getElementById("mytable").rows;
    for (var i = 0; i < therows.length; i++) {
    attachEventListener(therows[i],'mouseover',function(){this.style.backgroundColor="red"});
    attachEventListener(therows[i],'mouseout',function(){this.style.backgroundColor="white"});
    }
    if your external script is getting loaded at the end of your body section (as it should be) you can just put the above code at the end of your js file. If it's somewhere else you may want to place it in a window onload function

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I make sure that the id of the table is "mytable" and copied your code so now my js file looks like this:
    Code:
    function addLoadListener(fn)
    {
      if (typeof window.addEventListener != 'undefined')
      {
        window.addEventListener('load', fn, false);
      }
      else if (typeof document.addEventListener != 'undefined')
      {
        document.addEventListener('load', fn, false);
      }
      else if (typeof window.attachEvent != 'undefined')
      {
        window.attachEvent('onload', fn);
      }
    };
    function attachEventListener(target, eventType, functionRef, capture)
    {
      if (typeof target.addEventListener != "undefined")
      {
        target.addEventListener(eventType, functionRef, capture);
      }
      else 
      {
        target.attachEvent("on" + eventType, functionRef);
      }
      return true; 
    };
    function  validateForm()
    {
    	 attachEventListener(document.getElementById('addform'), "submit", validateadd, false);
    	 function validateadd()
    	 {
    		 return checking('addfirst','addlast','addmail','addnumber');
    	 }
    	 attachEventListener(document.getElementById('editform'), "submit", validateedit, false);
    	 function validateedit()
    	 {
    		 return checking('editfirst','editlast','editmail','editnumber');
    	 }
    	 var therows=document.getElementById("mytable").rows;
    	 for (var i = 0; i < therows.length; i++) {
    		 attachEventListener(therows[i],'mouseover',function(){this.style.backgroundColor="red"});
    		 attachEventListener(therows[i],'mouseout',function(){this.style.backgroundColor="white"});
    	}
    };
    function checking(first, last, mail, number)
    {
    	 var firstvalue=document.getElementById(first).value;
    	 var lastvalue=document.getElementById(last).value;
    	 var mailvalue=document.getElementById(mail).value;
    	 var numbervalue=document.getElementById(number).value;
    	 var shtrodel=0;
    	 var error=0;
    	 var dot=0;
    	 //firstname validation
    	 for (counter=0;counter<firstvalue.length;counter++)
    	 {
    	     if(!(firstvalue.charAt(counter)>='a' && firstvalue.charAt(counter)<='z')&&!(firstvalue.charAt(counter)>='A' && firstvalue.charAt(counter)<='Z')
    			 &&firstvalue.charAt(counter)!=' ')
    		 {
    			 alert ("First name must contain only letters!")
    			 return false;
    		 }
    	 }
    	 firstvalue=capitaliseFirstLetter(firstvalue);
    	 document.getElementById(first).value=firstvalue;
         //lastname validation
    	 for (counter=0;counter<lastvalue.length;counter++)
    	 {
    		 if(!(lastvalue.charAt(counter)>='a' && lastvalue.charAt(counter)<='z')&&!(lastvalue.charAt(counter)>='A' && lastvalue.charAt(counter)<='Z')
    			 &&lastvalue.charAt(counter)!=' ')
    		 {
    			 alert ("Last name must contain only letters!")
    			 return false;
    		 }
    	 }	 
    	 lastvalue=capitaliseFirstLetter(lastvalue);
    	 document.getElementById(last).value=lastvalue;
    	 //mail validation
    	 for (counter=0;counter<mailvalue.length;counter++)
    	 {
    		 if(!(mailvalue.charAt(counter)>='a' && mailvalue.charAt(counter)<='z')&&!(mailvalue.charAt(counter)>='A' && mailvalue.charAt(counter)<='Z')
    			 &&!(mailvalue.charAt(counter)>='0'&&mailvalue.charAt(counter)<='9')
    			 && mailvalue.charAt(counter)!='_' && mailvalue.charAt(counter)!='-' && mailvalue.charAt(counter)!='.' && mailvalue.charAt(counter)!='@')
    		 {	 
    			 error=1;
    		 }
    		 if(mailvalue.charAt(counter)=='@')
    		 {
    			 shtrodel++;
    		 }	 
    		 if(mailvalue.charAt(counter)=='.')
    		 {
    			 dot++;
    		 }	 
    	 }	 
    	 if (error==1)
    	 {
    		 alert("Illegal e-mail adress: The adress should contain only letters, '-', '_' or '.'");
    		 return false;
    	 }
    	 if (dot==0)
    	 {
    		 alert("Illegal e-mail adress");
    		 return false;
    	 }
    	 if (shtrodel==0)
    	 {
    		 alert("Illegal e-mail adress: The adress must contain @");
    		 return false;
    	 }
    	 else if (shtrodel>1)
    	 {
    		 alert("Illegal e-mail adress: The adress must contain only one '@'");
    		 return false;
    	 }
    	 //number validation
    	 for (counter=0;counter<numbervalue.length;counter++)
    		 {
    			 if(!(numbervalue.charAt(counter)>='0'&&numbervalue.charAt(counter)<='9'))
    			 {
    				 alert("Illegal phone number: The phone number must contain only numbers!");
    				 return false;
    			 }
    		 }
    		 if (numbervalue.length<8)
    		 {
    			 alert("The phone number is too short");
    			 return false;
    		 }
    		 else if (numbervalue.length>12)
    		 {
    			 alert("The phone number is too long");
    			 return false;
    		 }
    		 return true;	 
    };
    function capitaliseFirstLetter(string)
    {
         return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    
    addLoadListener(validateForm);
    And it's still not working. Do you have any idea why?

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Anybody?

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    where in your document are you loading your external js file?

  • #10
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    In the head of index.php.
    All my javascript code is working except the changing of the rows colors.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I direct you to post #6 of this thread.

    (or your error console)
    Last edited by xelawho; 10-11-2012 at 01:15 AM.

  • #12
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I read it but im very new to javascript so i can't get it yet. Can you tell me what is the problam there?

  • #13
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I direct you to post #6 of this thread.

    (or your error console)
    I have to connect to the external file from the head. Thats what the proffesor wants us to do. And i did put your code on onlaod window function. So i don't understand what is the problam.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by Piece Of Meat View Post
    I did put your code on onlaod window function.
    oh, sorry - I missed that. Where is your window onload function (ie, the one that waits for the contents of the window to be assembled before firing)?

  • #15
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    oh, sorry - I missed that. Where is your window onload function (ie, the one that waits for the contents of the window to be assembled before firing)?
    Code:
    function  validateForm()
    {
    	 attachEventListener(document.getElementById('addform'), "submit", validateadd, false);
    	 function validateadd()
    	 {
    		 return checking('addfirst','addlast','addmail','addnumber');
    	 }
    	 attachEventListener(document.getElementById('editform'), "submit", validateedit, false);
    	 function validateedit()
    	 {
    		 return checking('editfirst','editlast','editmail','editnumber');
    	 }
    	 var therows=document.getElementById("mytable").rows;
    	 for (var i = 0; i < therows.length; i++) {
    		 attachEventListener(therows[i],'mouseover',function(){this.style.backgroundColor="red"});
    		 attachEventListener(therows[i],'mouseout',function(){this.style.backgroundColor="white"});
    	}
    };
    And in the end of the js file:
    Code:
    addLoadListener(validateForm);


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •