2015-04-26 42 views
0

如何才能标记表格中的一列。我会制定一个时间表。当一节课开始时,该栏应标有其他颜色。我想用JavaScript来做。如何在表格中标记一列

<html> 
<head> 
<?php 
require_once("layout.php"); 
    ?> 


<meta charset="utf-8"> 
</head> 
<body onload="ZeitAnzeigen()"> 


<div id="wrapper"> 
     <h1 style="color: #DB441A"> Stundenplan <small>BBS Westerburg</small></h1> 


<script type="text/javascript"> 


function ZeitAnzeigen() { 

    var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", 
           "Donnerstag", "Freitag", "Samstag"); 
    var Jetzt = new Date(); 
    //var Tag = Jetzt.getDate(); 
    //var Monat = Jetzt.getMonth() + 1; 
    //var Jahr = Jetzt.getYear(); 
    var Stunden = Jetzt.getHours(); 
    var Minuten = Jetzt.getMinutes(); 
    //var Sekunden = Jetzt.getSeconds(); 
    var WoTag = Jetzt.getDay(); 


    // Null voranstellen wenn nötig 
    //var Vortag = (Tag < 10) ? "0" : ""; 
    //var Vormon = (Monat < 10) ? ".0" : "."; 
    //var Vorstd = (Stunden < 10) ? "0" : ""; 
    //var Vormin = (Minuten < 10) ? ":0" : ":"; 
    //var Vorsek = (Sekunden < 10) ? ":0" : ":"; 

      //var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr; 

      //var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden; 
      //var Uhrzeit = Stunden +":"+ Minuten + ":" + Sekunden; 

      //var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit; 

    var MinTotal = Stunden * 100 + Minuten; 

    //document.getElementById('Uhr').innerHTML=Uhrzeit; 
    //document.getElementById('Datum').innerHTML=WoTag; 
    //document.getElementById('MinTotal').innerHTML=MinTotal; 

    var Schulstunde; 
    if (MinTotal > 745){  // wenn nach 7:45 Uhr dann... 

     switch (true) { 
     case (MinTotal < 830): 
      Schulstunde = 1 ; 
      break; 
     case (MinTotal < 915): 
      Schulstunde = 2 ; 
      break; 
     case (MinTotal < 930): 
      Schulstunde = 10 ; 
      break; 
     case (MinTotal < 1015): 
      Schulstunde = 3 ; 
      break; 
     case (MinTotal < 1100): 
      Schulstunde = 4 ; 
      break; 
     case (MinTotal < 1115): 
      Schulstunde = 20 ; 
      break; 
     case (MinTotal < 1200): 
      Schulstunde = 5; 
      break; 
     case (MinTotal < 1245): 
      Schulstunde = 6; 
      break; 
     case (MinTotal < 1330): 
      Schulstunde = 30; 
      break; 
     case (MinTotal < 1415): 
      Schulstunde = 7; 
      break; 
     case (MinTotal < 1500): 
      Schulstunde = 8; 
      break; 

     default: 
      Schulstunde =1200; 
      break; 



      var timeout = window.setTimeout("ZeitAnzeigen()", 1000); 
     } 

      var AktStunde = "" + Schulstunde + WoTag; 

      alert(AktStunde); 

     var progress_x = document.getElementByID(AktStunde); 
     var breite = parseInt(progress_x.style.width); 
     breite = breite + 1; 
     var tmp = breite + 10; 

     progress_x.style.width = tmp; 

     if (breite < 95){ 
     window.setTimeout("ZeitAnzeigen()", 1000); 
    } 
    window.setTimeout("ZeitAnzeigen()", 1000);   

} 


</script> 

<table class="table table-bordered"> 

    <thead> 
     <tr> 
      <td>Stunde</td> 
      <td>Montag</td> 
      <td>Dienstag</td> 
      <td>Mittwoch</td> 
      <td>Donnerstag</td> 
      <td>Freitag</td> 

     </tr> 
    </thead> 
    <tbody> 

<?php 

    $name = $_SESSION['user']; 
    $sql = "SELECT Nachname, Klasse FROM tbl_benutzer WHERE Anmeldenamen = '$name'"; 
    $result = mysql_query($sql) or die (mysql_error()); 


     echo $name; 
     echo "<br>"; 

        $sql = "SELECT Fach, L1, L2, Tag, StdPos FROM tbl_stunden WHERE Woche != '2' ORDER BY StdPos, Tag"; 
        $result = mysql_query($sql) or die (mysql_error()); 
        $Std=1; 
        $daycount = 1; 
        $td_id = 1; 
        $p_id = 1; 
        $pause = 1; 
        $tdd_id = 1; //Tabledesk ID von Tag 

        while($row = mysql_fetch_array($result)) 
        { 

         if($daycount==1) 
         { 
          echo "<tr>"; 
           echo "<td>" .$Std. "</td>"; 
         } 
          echo "<td><div id=" . $row['StdPos'] . $row['Tag'] . " 
          style='display:block; height: 41px; width: 3px; background: red; margin: -8px;'><div width: 100%;>". $row['Fach'] . "<br>" . $row['L1'] . "</div></div></td>"; 

          $daycount++; 
          $td_id++; 

         if($p_id == 10 && $pause <4) 
         { 
          echo "<tr><td id=".$p_id. $pause.">Pause </td></tr>"; 
          $p_id=0; 
          $pause+=1; 

         } 
         $p_id++; 

         if($daycount ==6) 
         { 
          echo"</tr>"; 
          $daycount = 1; 
          $Std +=1; 
          $tdd_id +=1; 
          $td_id = 1; 

         } 
         } 

        ?> 


     </tbody> 
</table> 



     </div>  


</body> 
</html> 

这是我的PHP脚本,其中生成时间表。但JavaScript不会工作

任何人都可以帮助我吗?

格尔茨 Fabiann

回答

0

得到DOM行利用和manipuilate它

var myRow = document.getElementById("rowID"); 
row.style.backgroundColor = "red"; 

你能指望前行? 因为解决这个问题的一种方法是这样的: 给他们正在进行的ID,如“CELLID1”,“CELLID2”

var rowCount = 10; 
var i =1; 

for (i >= 10) 
{ 
var myCell = document.getElementById("cellID" + i); 
myCell.style.backgroundColor = "red"; 
i++; 
} 
+1

他要求风格_column_一个行。 – Xufox

+0

它和老兄一样;)只是一个不同的ID – dErDoiTsche

+1

用类来做这件事会更好。您可以在CSS中为类添加规则(例如,'.highlightedCol'),并将该类分配给每个第n列。 – Xufox