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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight and select search results in table row

    Hi all. I have a PHP script that searches a database and outputs the results in a table with several TD's.

    The user can select a radiobutton and press a button to edit that record.

    I need a JavaScript to do this :

    Highlight the entire row when the mouse is over it (using in-line class).
    Un-highlight when the mouse exits it (in-line class again).
    Allow the user to select the radio button by clicking anywhere in the row
    Highlight the selected row (with another in-line class)

    My scripts endlessly have problems. Can any kind soul help?

    Below is a small sample from the table...

    A non-highlighted row is class "tcell"
    a highlighted (mouseover) class is "rhtcell"
    a radiobutton selected class is "selcell"

    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>
    </table>

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just solved my own problem...
    For anyone interested :


    note that

    class tcell is ordinary text
    class rhtcell is text highlighted by mouse-over
    class selcell is text highlighted by selection of radio-button



    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){
    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>
    
    
    <tr onClick="ClickRadio(this)" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this)" class="tcell"><td><input type="radio" name="patientcode" value="4"></td><td>4</td><td>Billy Jones</td><td>0000-00-00</td><td></td><td></td><td></td></tr>


  •  

    Posting Permissions

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