www.webdeveloper.com
Results 1 to 12 of 12

Thread: table roll rollover highlight, click anywhere and radio button

  1. #1
    Join Date
    May 2009
    Posts
    8

    table roll rollover highlight, click anywhere and radio button

    Hi all.

    I'm going nuts trying to combine a few things into one JS routine.

    I have a table showing search results. Only one of the results can be selected for editing so there is a single radio button in each row. (In its own TD with lots of other TD's showing username etc etc)

    By default, the first of the radio buttons is selected to the situation will NEVER happen that none of them are selected.

    At the moment, I have JS to:
    - highlight the entire row the mouse is in and
    - allow the user to click anywhere in the row to select the radio button

    Currently the row un-highlights when the mouse moves out of the row even if the radio button is selected.

    What I'd like to do also is to have the row remain highlighted when the radio button is selected but I can't get the two separate scripts to combine happily. So I'm hoping to just replace the whole lot.

    The page works with inline style sheets and I'd like to be able to work with 3 separate styles :

    1 - The ordinary row not highlighted
    2 - The row highlighted because the mouse is in it
    3 - The row highlighted because the radio button is selected.

    Can some kind person assist?

    Thanks

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    On row mouseout see if the radio is checked - act accordingly.

  3. #3
    Join Date
    May 2009
    Posts
    8
    I've tried and failed. Here is the JS I'm using...

    Code:
    <script type="text/javascript" language="JavaScript">
    <!--
    function cellrollover(cell, classname) {
      if (document.all || document.getElementById) {
        cell.classBackup = cell.className;
        cell.className   = classname;
      }
    }
    function cellrollout(cell)
    {
      if (document.all || document.getElementById) {
        cell.className   = cell.classBackup;
      }
    }
    
    function ClickRadio(p_tr) {
    var l_element;
    for( var ii = 0; ii < p_tr.childNodes.length; ii++ ) {
    if (p_tr.childNodes[ii].tagName=="TD") {
    for (var j=0; j< p_tr.childNodes[ii].childNodes.length;j++){
    l_element=p_tr.childNodes[ii].childNodes[j];
    if (l_element.tagName=='INPUT' &&
    l_element.type=="radio") {
    l_element.checked=true;
    }}}}}
    
    -->
    </script>

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Try this:
    Code:
    function cellrollout(cell)
    {
      if ((document.all || document.getElementById) && !cell.parentNode.getElementsByTagName('input')[0].checked) {
        cell.className   = cell.classBackup;
      }
    }
    Really need to see the html

  5. #5
    Join Date
    May 2009
    Posts
    8
    Code:
    <table align="center" border="0" width="1000" class="stable">
    <form method="post" action="index.php">
        <tr class="shcell">
            <td>Select</td>
            <td>Number</td>
            <td>Name</td>
            <td>Birthday</td>
            <td>Address 1</td>
    
            <td>Address 2</td>
            <td>City</td>
        </tr>
    <tr onClick="ClickRadio(this);" class="tcell" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this, 'rhtcell')"><td><input type="radio" name="patientcode" value="1" checked></td><td>1</td><td>Jeremy Smith</td><td>2009-04-22</td><td></td><td></td><td></td></tr> 
    <tr onClick="ClickRadio(this);" class="tcell" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this, 'rhtcell')"><td><input type="radio" name="patientcode" value="2"></td><td>2</td><td>Bill Jones</td><td>0000-00-00</td><td></td><td></td><td></td></tr>

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function cellrollout(cell)
    {
      if ((document.all || document.getElementById) && !cell.getElementsByTagName('input')[0].checked) {
        cell.className   = cell.classBackup;
      }
    }

  7. #7
    Join Date
    May 2009
    Posts
    8
    Thanks for the new code....sort of works.

    The row with the selected checkbox remains highlighted when mouseout but it remains highlighted when subsequently un-checked.

    And on the initial loading of the page, the row that is selected by default is not highlighted.

    I think it needs re-doing from scratch.

    On first page load, it needs to highlight the selected row even before any mousein or mouseout events. Then when a new radio is selected, the previously selected (therefore highlighted) row needs to revert to the un-highlighted state. Lastly, I'd like to have a third possible state for the rows, as below :

    1 -Default - neither highlighted by the mousein or by selection of the radio button.
    2 - Highlighted - by the mousein event
    3 - Highlighted differently - by the selection of the radio button.

    I'm beginning to think the current JS is just not up to the task.

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function cellrollover(cell, rhtcell) {
    cell.style.background='yellow';
    }
    
    function cellrollout(cell) {
    if (!cell.getElementsByTagName('input')[0].checked) {
        cell.style.background='white';
        }
    }
    
    function ClickRadio(cell) {
    var aRadio=cell.parentNode.getElementsByTagName('input');
    for(var i=0; i<aRadio.length; i++) {
    	aRadio[i].parentNode.parentNode.style.background=(aRadio[i].checked)? 'yellow' : 'white';
        }
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    on {}
    off {}
    </style>
    
    </head>
    <body>
    <form method="post" action="index.php">
    <table align="center" border="0" width="1000" class="stable">
        <tr class="shcell">
            <td>Select</td>
            <td>Number</td>
            <td>Name</td>
            <td>Birthday</td>
            <td>Address 1</td>
    
            <td>Address 2</td>
            <td>City</td>
        </tr>
    <tr onClick="ClickRadio(this);" class="tcell" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this, 'rhtcell')"><td><input type="radio" name="patientcode" value="1" checked></td><td>1</td><td>Jeremy Smith</td><td>2009-04-22</td><td></td><td></td><td></td></tr> 
    <tr onClick="ClickRadio(this);" class="tcell" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this, 'rhtcell')"><td><input type="radio" name="patientcode" value="2"></td><td>2</td><td>Bill Jones</td><td>0000-00-00</td><td></td><td></td><td></td></tr>
    </table>
    </form>
    </body>
    </html>

  9. #9
    Join Date
    May 2009
    Posts
    8
    Thanks for your help Fang.

    The only thing that does not work now is that clicking anywhere in the row does not select the radio button. You have to point right at it.

    Almost there !

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function ClickRadio(cell) {
    cell.getElementsByTagName('input')[0].checked=true;
    var aRadio=cell.parentNode.getElementsByTagName('input');
    for(var i=0; i<aRadio.length; i++) {
        aRadio[i].parentNode.parentNode.style.background=(aRadio[i].checked)? 'yellow' : 'white';
        }
    }

  11. #11
    Join Date
    May 2009
    Posts
    8
    Fang...thanks for all the suggestion but nothing works properly and I need to do this with CSS classes, not changes of background colour.

    lass tcell is standard, un-highlighted text
    class rhtcell is highlighted due to roll-over
    class selcell is highlighted due to radio selection


    This script comes close but but it resets the routine to un-highlight on radio button selection is faulty.
    The entire table is set to class="tcell" not just the un-clicked rows. I know it's a simple fix but I can't get it right!

    Code:
    <script type="text/javascript">
    function cellrollover(cell){
    	  if (document.all || document.getElementById){
    	  	if (!cell.getElementsByTagName('input')[0].checked==true){
    	  		cell.className='rhtcell';	
    	  	}
    	
    }
    }
    
    function cellrollout(cell){
    	  if (document.all || document.getElementById){
    	  	cell.className='tcell';	
    	  	if (cell.getElementsByTagName('input')[0].checked==true){
    	  		cell.className='selcell';	
    	  	}
    
    }
    }
    
    function ClickRadio(cell){
    	cell.getElementsByTagName('input')[0].checked=true;
    	cell.className='selcell';
    var aRadio=cell.parentNode.getElementsByTagName('input');
    for(var i=0; i<aRadio.length; i++) {
    	if (!aRadio[i].checked == true){
        aRadio[i].parentNode.parentNode.className = 'tcell';
        }
    	}	
    	
    }
    </script>
    Last edited by angusmann; 05-08-2009 at 07:25 PM.

  12. #12
    Join Date
    May 2009
    Posts
    8
    Ahh !!
    Got it.


    Code:
    </style><script type="text/javascript">
    function cellrollover(cell){
    	  if (document.all || document.getElementById){
    	  	if (!cell.getElementsByTagName('input')[0].checked==true){
    	  		cell.className='rhtcell';	
    }}}
    
    function cellrollout(cell){
    	  if (document.all || document.getElementById){
    	  	cell.className='tcell';	
    	  	if (cell.getElementsByTagName('input')[0].checked==true){
    	  		cell.className='selcell';	
    	  	}}}
    
    function ClickRadio(cell){
    var rowe=cell.parentNode.getElementsByTagName('TR');
    for(var i=0; i<rowe.length; i++) {
    	if (rowe[i].className == "selcell" || rowe[i].className == "rhtcell"){
        rowe[i].className = 'tcell';
    }}
    cell.getElementsByTagName('input')[0].checked=true;
    cell.className='selcell';
    }	
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles