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.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    adding onmouseover to table/row/cell

    Hi,

    I am trying to use the onmouseover on a table element (table/row/cell)
    when creating the table using HTML everything is ok.
    Code:
    <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.

    Code:
    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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a try by appending a tbody element as the immediate child of table.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Event handlers are not strings but function pointers. Javascript is case-sensitive too. Change these:

    Code:
    tmpCell.onMouseOver="this.bgColor='gold';" 
    tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
    to:
    Code:
    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.

    Code:
    <style type="text/css">
    td.hoverIt:hover {
      background-color:#FFFFFF;
    }
    </style>
    Code:
    <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>
    Last edited by glenngv; 12-08-2009 at 11:45 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    amitye (12-09-2009)

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    problem solved.
    thanks everyone!

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Event handlers are not strings but function pointers. Javascript is case-sensitive too. Change these:

    Code:
    tmpCell.onMouseOver="this.bgColor='gold';" 
    tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
    to:
    Code:
    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.

    Code:
    <style type="text/css">
    td.hoverIt:hover {
      background-color:#FFFFFF;
    }
    </style>
    Code:
    <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?

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by amitye View Post
    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:
    Code:
    cellElement.onclick=function(){alert(this.parentNode.rowIndex)}
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    Yes. If it's about the row index and the element to be clicked is the cell within that row:
    Code:
    cellElement.onclick=function(){alert(this.parentNode.rowIndex)}

    Thanks!


  •  

    Posting Permissions

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