AJAX表格和插入

我創建了一個類似「calender」的表格，它通過位於.PHP文件中的列表更新其內容。它工作正常，但我希望能夠更好地設計它。我希望當前出現在表格下方的「contentContainer」中的文本出現在它所屬的單元格中。截至目前，如果我將div移動到$ calender，它只會加載到第一個單元格中。AJAX表格和插入

我還想讓行在7列中斷。

<script type="text/javascript"> 
     var request; 
     showEvents = function(caller){ 
      request = new XMLHttpRequest(); 
      request.open("GET", "getevents.php?id="+caller.id, true); 
      request.onreadystatechange = updatePage(caller.id); 
      request.send(null); 
     }; 
     function updatePage(elemId){ 
      if(request.readyState == 4){ 
       var data = request.responseText; 
       document.getElementById(elemId).innerHTML="<span>"+data+"</span>" 
      } 
     } 
    </script> 

<style> 
table { 
    width: 700px; 
} 
td { 
    border: 1px solid; 
    min-width: 100px; 
    height: 100px; 
    vertical-align: text-top; 
    text-align: right; 
    box-sizing:border-box; 
    padding: 5px; 
} 
</style>  
</head><body> 
<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <th colspan="31" scope="col">Calender</th> 
    </tr> 
    <tr> 
    <?php 
     $calendar=""; 
     for($i=1;$i<=31;$i++){ 
      $calendar .= "<td id='".$i."' onclick='showEvents(this)'><a href='#' id='".$i."'>".$i."</a> </td>"; 
     if (($i % 7) == 0) $calendar .= '</tr><tr>'; 
     } 
     echo $calendar; 
    ?> 
    </tr> 
</table> 
<div id="contentContainer"></div> 
</body> 
</html>

來源

2012-10-17 Black Bird

要獲得7天橫跨你要找的，我會把這個for循環：

if (($i % 7) == 0) $calendar .= '</tr><tr>';

至於您的事件表彈出，請確保您通過該小區的ID從showEvents到updatePage：

request.onreadystatechange = updatePage(caller.id); 
… 
function updatePage(elemId){ 
… 
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"

這應該讓你那裏。爲了使這更加完整，我將利用PHP日期/時間函數來正確設置每個日期在日曆上的正確位置。

更新：

我已經在它的工作一點，這裏是我得到了什麼。出於某種原因，我不知道，JavaScript不喜歡將這兩個函數分開。這是固定的，我也添加了一週的間隔。結果如下：

<script type="text/javascript"> 
    var showEvents = function(caller){ 
     request = new XMLHttpRequest(); 
     request.open("GET", "getevents.php?id="+caller.id, true); 
     request.onreadystatechange = function() { 
      if(request.readyState == 4){ 
       var data = request.responseText; 
       document.getElementById(caller.id).innerHTML="<span>"+data+"</span>" 
      } 
     } 
     request.send(); 
    }; 
</script> 
<style> 
table { 
    width: 700px; 
    border-collapse: collapse; 
} 
td { 
    border: 1px solid; 
    min-width: 100px; 
    height: 100px; 
    vertical-align: text-top; 
    text-align: right; 
    box-sizing:border-box; 
    padding: 5px; 
} 
</style>  
</head><body> 
<table> 
    <tr> 
     <th colspan="7">Calendar</th> 
    </tr> 
    <tr> 
    <?php 
     $calendar=""; 
     $n = 0; 
     $month = strtotime("2012-10-01"); // Always the first of the month 
     $start = date('N', $month); 
     $days = date('t',$month); 
     for($i=1;$i<=$days;$i++){ 
      $n++; 
      if ($n <= $start) { // '<=': week starts on Sunday; '<': week starts on Monday 
       $calendar .= "<td>&nbsp;</td>"; 
       $i--; 
      } else { 
       $calendar .= "<td id='{$i}' onclick='showEvents(this); return false;'><a href='#' id='{$i}'>{$i}</a></td>"; 
      } 
      if (($n % 7) == 0) $calendar .= '</tr><tr>'; 
     } 
     echo $calendar; 
    ?> 
    </tr> 
</table> 
<div id="contentContainer"></div> 
</body> 
</html>

來源

2012-10-17 21:09:44 qsheets

我添加了所有這些元素，7行分割工作正常。但是，我現在沒有在頁面上的任何地方收到msg。「未捕獲的ReferenceError：請求未定義」第12行爲「if（request.readyState == 4）{」我已更新我的代碼以反映您建議的當前更改。 'showEvents'上面的 –

放'var request;'。它需要是一個全局變量。 – qsheets

此外，不應該單元格調用'showEvents'而不是'updatePage'？ – qsheets

AJAX表格和插入

回答

相關問題