0

我创建了一个类似“日历”的表格，它通过位于 .PHP 文件中的列表更新其内容。它工作正常，但我希望能够更好地设计它。我想让当前出现在表格下“contentContainer”中的文本出现在它所属的单元格中。到目前为止，如果我将 div 移动到 $calender 中，它只会加载到第一个单元格中。

我还希望该行在 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>
4

1 回答 1

0

为了获得您正在寻找的 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-17T21:09:44.493 回答