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は2つの関数が分離されることを好まない。これは修正され、曜日スペーサーも追加しました。結果は次のとおりです。

<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 に答える