#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    52
    Rep Power
    3

    Mouse over in table question?


    Thank you in advance. I currently have a function that is returning values into a table. I want the mouse over to be return value of total. Can this be done in a table?

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <
    head>
            <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <
    title>PaytheMan</title>
                
    <
    TABLE ID="oTable" BORDER="1" >
    <
    TBODY ID="oTBody0"></TBODY>
    </
    TABLE>

    <
    script>
    window.onload fnInit;
    var 
    principle 10000;
        function 
    totalInterest(period,annualrate)
    {  
             
    total principle * (annualrate 100 ) * (period 12) ; 
    totalLoan principle total;
             
             return 
    totalLoan;
             return 
    total;
     
    alert (totalLoan);
        
      }
      




    function 
    fnInit()
    {
      
    // Declare variables and create the header
      
    var oTHead oTable.createTHead();

      var 
    oRowoCell;
      var 
    ij;

      
    // Declare Rates
      
    var heading = new Array();

      
    heading[0] = "Annual Rate </br>Period (months)";
      
    heading[1] = "4%";
      
    heading[2] = "5%";
      
    heading[3] = "6%";

     
      
    oRow oTHead.insertRow(-1);
      
    oTHead.setAttribute("bgColor","lightskyblue");

      
    // Insert cells into the header row.
      
    for (i=0i<heading.lengthi++)  

      {
        
    oCell oRow.insertCell(-1);
        
        
    oCell.style.fontWeight "bold";
        
    oCell.innerHTML =heading[i];
      }

      
    // Insert rows and cells into bodies.
    for (var period 6period <=24period += 6)    {
        
        
    oBody oTBody0;
            
    oRow oBody.insertRow(-1);
         
    oCell oRow.insertCell(-1);
        
    oCell.innerHTML period;


            
        
        
       for (var 
    annualrate 4annualrate <= 6annualrate++)   
        {
            
              
    oCell oRow.insertCell(-1);
                        
    oCell.innerHTML totalInterest(annualrate,period); 
              
             
        }
        
      }



    }
    </SCRIPT>

            
    </head>    

        <body>
            <p>Perfoms a calculation, and returns the result:</p>

        
        
        
        </body>

        
            



        
    </html> 
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Not quit sure if this is what you were looking for or not, but I thought this was something like what you were trying to do.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <title>PaytheMan</title>
    
    <script>
    
    var principle = 10000;
    
    function totalInterest(period,annualrate)
    {  
             
    total = principle * (annualrate / 100 ) * (period / 12) ; 
    totalLoan = principle + total;
             
             return totalLoan;
             return total;
     alert (totalLoan);
      }
      
    
    
    
    
    function fnInit()
    {
      // Declare variables and create the header
      var oTHead = oTable.createTHead();
    
      var oRow, oCell;
      var i, j;
    
      // Declare Rates
      var heading = new Array();
    
      heading[0] = "Annual Rate </br>Period (months)";
      heading[1] = "4%";
      heading[2] = "5%";
      heading[3] = "6%";
    
     
      oRow = oTHead.insertRow(-1);
      oTHead.setAttribute("bgColor","lightskyblue");
    
      // Insert cells into the header row.
      for (i=0; i<heading.length; i++)  
    
      {
        oCell = oRow.insertCell(-1);
        
        oCell.style.fontWeight = "bold";
        oCell.innerHTML =heading[i];
      }
    
      // Insert rows and cells into bodies.
    for (var period = 6; period <=24; period += 6)    {
        
        oBody = oTBody0;
            oRow = oBody.insertRow(-1);
         oCell = oRow.insertCell(-1);
        oCell.innerHTML = period;
    
    
            
        
        
       for (var annualrate = 4; annualrate <= 6; annualrate++)   
        {
              oCell = oRow.insertCell(-1);
                        oCell.innerHTML = "<span onmouseover='javascript:showRate(this.innerHTML)'>" + totalInterest(annualrate,period) + "</span>"; 
              
             
        }
        
      }
    
    
    
    }
    
    function showRate(results)
    {
    if (results == undefined) {
    results="";
    }
    document.getElementById("rate").innerHTML = results;
    document.getElementById("oTable").onmouseout = function() {
     document.getElementById("rate").innerHTML = "";
    }
    }
    
    document.onreadystatechange = function() {
     if (document.readyState == "complete") {
      new fnInit();
      new showRate();
     }
    }
    
    </SCRIPT>
    
            
    </head>    
    
        <body>
    
    <TABLE ID="oTable" BORDER="1">
    <TBODY ID="oTBody0"></TBODY>
    </TABLE>
    
            <p>Perfoms a calculation, and returns the result: <span id="rate"></span></p>
    
        
        
        
        </body>
    
        
            
    
    
    
        
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo