Changing tr color with event listener

Piece Of Meat · 10-07-2012, 07:54 PM

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

xelawho · 10-07-2012, 08:13 PM

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";
	}
}

Piece Of Meat · 10-08-2012, 08:51 AM

Quote:

Originally Posted by xelawho

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.

xelawho · 10-08-2012, 01:39 PM

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>

Piece Of Meat · 10-09-2012, 01:26 PM

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?

xelawho · 10-09-2012, 02:24 PM

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

Piece Of Meat · 10-09-2012, 07:44 PM

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?

Piece Of Meat · 10-10-2012, 10:50 PM

Anybody?

xelawho · 10-10-2012, 10:59 PM

where in your document are you loading your external js file?

Piece Of Meat · 10-11-2012, 12:07 AM

In the head of index.php.
All my javascript code is working except the changing of the rows colors.

xelawho · 10-11-2012, 01:08 AM

I direct you to post #6 of this thread.

(or your error console)

Piece Of Meat · 10-11-2012, 11:15 AM

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?

Piece Of Meat · 10-12-2012, 03:01 PM

Quote:

Originally Posted by xelawho

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.

xelawho · 10-12-2012, 03:23 PM

Quote:

Originally Posted by Piece Of Meat

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)?

Piece Of Meat · 10-12-2012, 05:50 PM

Quote:

Originally Posted by xelawho

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);