最近自己寫了一個查詢會議室預訂情況的界面，要求預訂情況可以根據不同的預訂時間定位到不同的位置，并且長度對應會議時長，效果如下

    預訂情況的結果我是使用php查詢出來的，我們先來搞定只有一個預訂的時候的展示

        var div1=document.createElement("div");         var row1=document.getElementsByTagName("body"); 	var node=document.createTextNode('這個是展示內容'); 	var top=document.getElementsByTagName("td")[0].getBoundingClientRect().top + 5; 	var left1=document.getElementsByTagName("td")[1].getBoundingClientRect().left ; 	var left2=document.getElementsByTagName("td")[2].getBoundingClientRect().left ; 	var left3=document.getElementsByTagName("td")[1].getBoundingClientRect().left ; 	var long =left2-left1+0.5; 	var w =7*long; 	div1.appendChild(node);         row1[0].appendChild(div1);        div1.title='這是title內容';         div1.style.textAlign='left'; //左對齊div1.style.height='30px';   //表體高 div1.style.lineHeight='30px';   //用于
    根據會議的開始時間和會議室，用<table>的<td>來定位會議預訂的位置和長會議度。
    其中的div1.style確定的是CSS的樣式。
try {		           $result = $db -> query($query);		            } catch (PDOException $e) {		              echo 'Connection failed: ' . $e->getMessage();		            }		            $res = $result->fetchAll(PDO::FETCH_ASSOC);		            // PRint_r($res);   展示所有結果		            foreach ($res as $value) {		            	// echo "<script type=/"text/javascript/"> /n";		            	// print_r($value);						echo "	var div1=document.createElement(/"div/"); /n";						echo "  var row1=document.getElementsByTagName(/"body/"); /n";						echo "	var node=document.createTextNode('預訂人：".$value['name'].";".$value['phone'].";".$value['department'].";會議主題：".$value['meetingtheme']." ".substr($value['starttime'],0,16)."~".substr($value['endtime'],11,5)."'); /n";						switch ($value['meetingroom']) {							case '9_1':						        echo "	var top=document.getElementsByTagName(/"td/")[0].getBoundingClientRect().top + 5; /n";								break;														case '9_2':								echo "	var top=document.getElementsByTagName(/"td/")[33].getBoundingClientRect().top + 5; /n";								break;						}						echo "	var left1=document.getElementsByTagName(/"td/")[1].getBoundingClientRect().left ; /n";						echo "	var left2=document.getElementsByTagName(/"td/")[2].getBoundingClientRect().left ; /n";						echo "	var left3=document.getElementsByTagName(/"td/")[".$value['startid']."].getBoundingClientRect().left ; /n";						echo "	var long =left2-left1+0.5; /n";						$w = $value['endid'] - $value['startid'];						echo "	var w =".$w."*long; /n";						echo "	div1.appendChild(node); /n";						echo "  row1[0].appendChild(div1); /n";												echo "  div1.title='預訂人：".$value['name']."；聯系電話：".$value['phone']."；部門：".$value['department'].";會議主題：".$value['meetingtheme']." ".substr($value['starttime'],0,16)."~".substr($value['endtime'],11,5)."'; /n";						echo "  div1.style.textAlign='left'; /n";						echo "	div1.style.height='30px';   //表體高 /n";						echo "	div1.style.lineHeight='30px';   //用于字體垂直居中 /n";						echo "	div1.style.borderRadius='5px';   //圓角 /n";						echo "	div1.style.whiteSpace='nowrap'; /n";						echo "	div1.style.textOverflow= 'ellipsis'; /n";						echo "	div1.style.overflow='hidden';    //這三個一起構成超出范圍自動省略的效果 /n";						echo "	div1.style.top= top+'px'; /n";						echo "	div1.style.left=left3 +'px'; /n";						echo "  div1.style.width= w + 'px'; /n";						echo "	div1.style.position='absolute'; /n";						echo "	div1.style.backgroundColor='red'; /n";						// echo " </script> /n";		            }		            echo "  document.getElementById(/"date/").value=/"$date/";";		            echo "  document.getElementById(/"meetingdate/").value=/"$date/";";		     其中$res = $result->fetchAll(PDO::FETCH_ASSOC);表示返回所有的查詢結果，返回的只有關聯數組。然后使用foreach循環每條來循環查詢結果，用value[' ']這種形式來提取對應的列值。這樣最后就可以得到如我們最開始所說的那樣子的展現效果了。
其實這還是有改進的空間的，可以將上面的div1.style中一部分整合成一個css樣式，然后改一改ClassName就可以進行復用了。
我將這個查詢會議室預訂情況的網頁坐下來之后，發現php來進行網頁開發的確上手很快，php的echo就像萬能鑰匙一樣，輸出什么就是什么。我剛好懂一點點Javascript，所以直接用JavaScript來控制DOM，輸出不同會議的情況。用php循環輸出JavaScript，雖然的確代碼不那么好看，但是開發快啊。