onmouseover by element that at the moment not exist

Discussion in 'HTML & Website Design' started by mathewmeconry, Aug 20, 2011.

  1. #1
    hi all
    its my first time here ^^

    so my problem:
    i've a table like this:

    [TABLE]
    [TR]
    [TD]08:00[/TD]
    [TD]rowspan down to 09:00
    onmouseover here for the td of 08:00 and 09:00[/TD]
    [/TR]
    [TR]
    [TD]08:15[/TD]
    [TD][/TD]
    [/TR]
    [TR]
    [TD]08:30[/TD]
    [TD][/TD]
    [/TR]
    [TR]
    [TD]08:45[/TD]
    [TD][/TD]
    [/TR]
    [TR]
    [TD]09:00[/TD]
    [TD][/TD]
    [/TR]
    [/TABLE]







    so but the onmouseover to the td 09:00 does not work.....

    my code to generate the table (it's not the whole code. it's just the part to generate the whole table with the rowspan. the comments are on german, if i should translate, say it to me):

    //Erstellt solange Felder bis $current = $end    
    while($current != $end)    
    {            
       $Z1 = explode(':', $current);        
       $Z2 = explode(':', '00:15');                 
       $Z3['i'] = $Z1[1] + $Z2[1]; //rechnet min zusammen               
        if ($Z3['i'] > 59)       
       {             
          $Z3['i'] = '00';            
          $Z2[0]++;        
       }         
       $Z3['H'] = $Z1[0] + $Z2[0]; //rechnet h zusammen
       if ($Z3['H'] == 24 && $Z3['i'] > 00)        
       {            
          $Z3['H'] = '00';        
       } elseif($Z3['H'] < 10) //wenn h < 10, dann ein 0 vorne an die zeit        
       {           
          $temp = '0'.$Z3['H'];            
          $Z3['H'] = $temp;       
       }               
          $current = $Z3['H'].":".$Z3['i']; //stellt die aktuelle zeit zusammen                    
    
        //<--- Start Schichten --->        
        if($current == @exploding_h_min(':', current($object_start)))        
       {            
          $trtd = "<tr><td>";            
          $td = "<td>";            
          $tdtr_ = "</td></tr>";           
          $td_ = "</td>";            
          $tdtd = "</td><td>";    
    
          //Zählen der Helfer und holen dieser Daten            
           $schichten_helfer_anzeigen_sql = "Select * From schichten_helfer WHERE (datum = '$datum' AND ort = '$_ort' AND schicht = '$i')";            
           $schichten_helfer_anzeigen_reg = mysql_query($schichten_helfer_anzeigen_sql, $link);            
          $schichten_helfer_zaehlen_sql = "SELECT *, COUNT(*) as total from schichten_helfer WHERE (datum = '$datum' AND ort = '$_ort' AND schicht = '$i')";                                 $schichten_helfer_zaehlen_reg = mysql_query($schichten_helfer_zaehlen_sql, $link);
         $schichten_helfer_zaehlen_query = mysql_fetch_array($schichten_helfer_zaehlen_reg, MYSQL_ASSOC);    
                        
         while($result = mysql_fetch_array($schichten_helfer_anzeigen_reg)) 
           $helfer = $helfer.$result['vorname']." ".$result['nachname']."<br>";  
    
            //Anzahl Helfer gleich benötigte Helfer           
          if($anzahl_helfer[$i] == $schichten_helfer_zaehlen_query['total'])            
          {                
             //Checkbox disable                
             $checkbox = "<img src=\"images/checkbox/disabled.png\" class=\"checkbox_disable\">";                
              $schicht_status = "disable";                
             $mouse_color = "#FF0000";            
         }else{                
             //Checkbox enable                
              $checkbox = "<input type=\"checkbox\" name=\"schicht[]\" value=\"".$i."\">";               
                $schicht_status = "avaiable";                $mouse_color = "#12970D";            
             }     
                       
             //Wenn Schicht 3/4/5 immer eine Spalte hinzufügen           
             if($i == 3 or $i == 4 or $i == 5)            
                {                
                  $tds = "<tr><td id=\"$current\">".$current.$tdtd;   
                 
                  if($i == 4 or $i == 5)$tds = $tds.$tdtd;               
                  if($i == 5)$tds = $tds.$tdtd;        
                            
                 $_html = $_html.$tds."<td class=\"schicht_".$schicht_status."\" onMouseover=\"ein('$current', '$mouse_color')\" onMouseOut=\"aus('$current');\"                 rowspan=\"".current($object_rowspan)."\"><p class=\"users\">$helfer</p>".$checkbox.$trtd_; 
    
                $_html_header = $_html_header."<td class=\"center\">Schicht $i</td>";                       
           } else {                
                $_html = $_html."<tr><td id=\"$current\">".$current."</td><td class=\"schicht_".$schicht_status."\" onMouseover=\"ein('$current', '$mouse_color')\"    onMouseOut=\"aus('$current');\" rowspan=\"".current($object_rowspan)."\"><p class=\"users\">$helfer</p>".$checkbox.$trtd_;               
    
                $_html_header = $_html_header."<td class=\"center\">Schicht $i</td>";           
           }                       
           next($object_start);            
           next($object_rowspan);            
           $helfer = '';           
            $i++;        
     } else {            
        $_html = $_html."<tr><td id=\"$current\">$current</td></tr>"; //erstellt eine zelle mit der aktuellen zeit        
      }        
     //<--- Ende Schichten --->
    PHP:
    Javascript function to onmouseover and outmouseover:

    <script type="text/javascript">
    function ein(start, color) 
    { 
    document.getElementById(start).style.backgroundColor=color;
    }
    
    function aus(start) 
    { 
    document.getElementById(start).style.backgroundColor="#C5D6F4";
    }
    </script>
    Code (markup):

    CSS-Code:

    <style type="text/css">        
    .schicht_avaiable { text-align:center; background-color:#12970D; width:150px; }       
     .schicht_disable { text-align:center; background-color:red; width:150px;}        
    .checkbox_disable { width: 25px; height: 25px; }        
    .center { text-align:center; width:150px; }        
    .users { color:blue; }        
    .lable { width:5em; display:block; float:left; }       
     .submit { float:right; }        
    .table { padding:15px; border-style:solid;border-color:black; border-width:thin; background-color:#C5D6F4; }
    </style>
    
    HTML:
     
    Last edited: Aug 20, 2011
    mathewmeconry, Aug 20, 2011 IP