...

View Full Version : adding onmouseover to table/row/cell



amitye
12-08-2009, 08:22 AM
Hi,

I am trying to use the onmouseover on a table element (table/row/cell)
when creating the table using HTML everything is ok.


<TABLE border="2" >
<TR >
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
<TD>24N</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>


However when I am trying to do the same using javascript it is not working.
I can see the correct table data and background color but it doesnt change on mouse over.



function test_table(srcHolder)
{
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "black";

var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<3; i++)
{
tmpRow = srcTable.insertRow()
for(j=0; j<3; j++)
{
tmpCell = tmpRow.insertCell()
tmpCell.innerText = j;
tmpCell.bgColor ="red"
tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
tmpCell=null;
}
tmpRow = null;
}
}


can someone explain to me what's wrong?

abduraooft
12-08-2009, 08:28 AM
Have a try by appending a tbody element as the immediate child of table.

glenngv
12-08-2009, 11:40 AM
Event handlers are not strings but function pointers. Javascript is case-sensitive too. Change these:


tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"

to:


tmpCell.onmouseover = function(){this.bgColor='gold';};
tmpCell.onmouseout = function(){this.bgColor='#FFFFFF';};

But this could also be solved even without scripting, just by using the CSS hover pseudo-class. This works in IE8, Firefox and other modern browsers excluding IE 7 and lower which you need a script like this (http://www.xs4all.nl/~peterned/csshover.html).


<style type="text/css">
td.hoverIt:hover {
background-color:#FFFFFF;
}
</style>


<table>
<tr><td class="hoverIt">cell1</td><td class="hoverIt">cell2</td></tr>
<tr><td class="hoverIt">cell3</td><td class="hoverIt">cell4</td></tr>
<tr><td>cell5</td><td>cell6</td></tr>
</table>

Kor
12-08-2009, 02:38 PM
A note: innerText is not a standard method, it is an IE only method.
Furtermore, bgColor is a deprecated attribute (as almost all the HTML attributes). To style the elements you better use CSS.

Could be something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#container table{
width:200px;
border-collapse:collapse;
}
#container table td{
padding:0;
}
#container table a, #container table a:visited{
display:block;
background-color:#FF0000;
text-decoration:none;
}
#container table a:hover{
background-color:#CD7F32;
}
</style>
<script type="text/javascript">
function createTable(){
var root=document.getElementById('container');
var table=document.createElement('table');
table.setAttribute('border','1');
table.setAttribute('borderColor','#000');
var tbody=document.createElement('tbody');
var Ntr=3, Ntd=3, tr, td, a;
for(var i=0;i<Ntr;i++){
tr=document.createElement('tr');
for(var j=0;j<Ntd;j++){
td=document.createElement('td');
a=document.createElement('a');
a.href='#';
a.onclick=function(){return false};
a.appendChild(document.createTextNode(j))
td.appendChild(a);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
root.appendChild(table);
}
onload=createTable
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>

amitye
12-08-2009, 06:23 PM
thanks all.
it was really helpful.

now my goal is to to get affect of when pressing on some line in a table,
it will be highlight and the line number will be saved in some varaiable.

1. is there a onmouseclick for a table row?
2. how can I within a function to change the the css properties of the line <tr>? does changing the class name is enough?

amitye
12-09-2009, 10:53 AM
problem solved.
thanks everyone!

amitye
12-09-2009, 10:54 AM
Event handlers are not strings but function pointers. Javascript is case-sensitive too. Change these:


tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"

to:


tmpCell.onmouseover = function(){this.bgColor='gold';};
tmpCell.onmouseout = function(){this.bgColor='#FFFFFF';};

But this could also be solved even without scripting, just by using the CSS hover pseudo-class. This works in IE8, Firefox and other modern browsers excluding IE 7 and lower which you need a script like this (http://www.xs4all.nl/~peterned/csshover.html).


<style type="text/css">
td.hoverIt:hover {
background-color:#FFFFFF;
}
</style>


<table>
<tr><td class="hoverIt">cell1</td><td class="hoverIt">cell2</td></tr>
<tr><td class="hoverIt">cell3</td><td class="hoverIt">cell4</td></tr>
<tr><td>cell5</td><td>cell6</td></tr>
</table>
is it possibel to pass arguemnts to function declared like this? for example passing the row index?

Kor
12-09-2009, 11:48 AM
is it possibel to pass arguemnts to function declared like this? for example passing the row index?
Yes. If it's about the row index and the element to be clicked is the cell within that row:


cellElement.onclick=function(){alert(this.parentNode.rowIndex)}

amitye
12-09-2009, 12:13 PM
Yes. If it's about the row index and the element to be clicked is the cell within that row:


cellElement.onclick=function(){alert(this.parentNode.rowIndex)}



Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum