...

View Full Version : Changing tr color with event listener



Piece Of Meat
10-07-2012, 08: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, 09:13 PM
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, 09:51 AM
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, 02: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...



<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, 02:26 PM
Thnx but i a little bit confused. I need all my javascript to be on external file.
This is my javascriptfile:


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, 03:24 PM
being that you already have an an attachEventListener function, you can just call that:



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, 08: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:


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, 11:50 PM
Anybody?

xelawho
10-10-2012, 11:59 PM
where in your document are you loading your external js file?

Piece Of Meat
10-11-2012, 01: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, 02:08 AM
I direct you to post #6 of this thread.

(or your error console)

Piece Of Meat
10-11-2012, 12:15 PM
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, 04:01 PM
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, 04:23 PM
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, 06:50 PM
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)?



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:


addLoadListener(validateForm);

xelawho
10-12-2012, 07:44 PM
I think you might be confused about the order in which things happen.

The page reads the code from top to bottom, starting at the head. When it gets to the head, it incorporates any external scripts as if they were part of the main page. If a function is called in one of those external scripts, it is the same as calling it in the head.

Once it is finished reading the head, it reads the body. If you call a function in the head that is supposed to act on elements in the body (such as attach event listeners to them) it will fail, because at the time that the page is reading the head the elements in the body don't exist yet

If you would like a practical demonstration, run the following code, then run it again with the javascript in the head. Then run it again with the javascript left in the head (and ask your professor why on earth you are being required to do this) but with the bit that attaches the event listeners wrapped in a window onload function:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<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>
</html>


(I am not using your attachEventListener code because it fails in IE)

Piece Of Meat
10-12-2012, 08:44 PM
Im not calling any function from the head. im only connecting to the js file from the head by using:


<script type="text/javascript" src="events.js" ></script>

I am not allowed to use any javascript in any other place than in the js file.

Piece Of Meat
10-12-2012, 08:45 PM
And by the way. All my javascript code is working except from the rows color changing.

xelawho
10-12-2012, 09:07 PM
yes, and in that file you call the addLoadListener function.

But sorry - I misread it, and it works fine (that function call does actually attach a window onload listener). There's obviously a problem somewhere else. Here's your code with the other bits taken out:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script>
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(){
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"});
}
};

addLoadListener(validateForm);
</script>
</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>
</body>
</html>


still doesn't work in IE, though, whereas the other attach event code does.

what does your error console say?

Piece Of Meat
10-12-2012, 09:13 PM
I don`t have an error consol.
Im working with notepad++

xelawho
10-12-2012, 10:17 PM
do you have a web browser and access to google?

Piece Of Meat
10-14-2012, 08:43 PM
Sure i have

xelawho
10-14-2012, 08:55 PM
well then I would suggest using your web browser to google error console and then reading how you can use the error console of your web browser to find what is wrong with your code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum