WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:時間によってセルの背景を変える方法

0:[投稿] kawati [2006/03/22 21:10 ] [環境:Opera8.5.3 わからないです]

tableタグで一週間のタイムテーブルみたいなものを作成したのですが、
曜日・時刻によって(例えば月曜日の19:00〜19:15の間だけ等)、特定のセルの背景の色を変える、なんてことを実現できるようなスクリプトはありますか?

<table>
<tr>
<td></td>
<td>月</td>
<td>火</td>
</tr>
<tr>
<td>19:00</td>
<td>月曜19:00(1)</td>
<td>火曜19:00(2)</td>
</tr>
<tr>
<td>19:15</td>
<td>月曜19:15(3)</td>
<td>火曜19:15(4)</td>
</tr>
</table>

月曜19:00になったら(1)のセルの背景を指定した色にする、
19:15になったら(1)は元に戻り、(3)をその色にする…という感じです
よろしくお願いします


1:[回答] miz [2006/03/22 23:53 ]

ページ表示時のみ対応でよいなら
手順
1.各セルに 一定の法則性をもってidを付ける
 例 
<td id="mon1900">月曜19:00(1)</td>  19:00 〜 19:14 の時色変え
<td id="tue1900">火曜19:00(2)</td>
<td id="mon1915">月曜19:15(3)</td>  19:15 〜 19:59 の時色変え
<td id="tue1915">火曜19:15(4)</td>

2.ページ表示後(onloadで)現在の曜日と時刻を調べて、該当idのセルのみ色を変える
<script type="text/javascript">
window.onload = function(){
var  now = new Date();
var week = now.getDay();
var hour = now.getHours();
var min  = now.getMinutes();
var weekly = new Array("san","mon","tue","wed","thu","fri","sat");

var change_id = weekly[ week ] + ((hour<10)? '0'+hour:''+hour) + ((min<15)? '00':'15');
if( document.getElementById(change_id) ){
  document.getElementById(change_id).style.backgroundColor = "blue";
}
}
</script>
表示したままで時間が過ぎたら、リロードすればその時刻に対応。


2:[質問] kawati [2006/03/23 00:30 ]

>mizさん
試してみたところ、うまくできました。ありがとうございます!
ただリアルタイムに表示させるとなるとやはり難しいですかね…?


3:[質問] kawati [2006/03/23 00:52 ]

申し訳ないです、それともうひとつ質問です
ところどころセルを結合していて並びが不規則な所があるのですが、
(例えば以下のように)

<table>
<tr>
<td></td>
<td>月</td>
<td>火</td>
</tr>
<tr>
<td>19:00</td>
<td>月曜19:00(1)</td>
<td rowspan=2>火曜19:00(2)</td>
</tr>
<tr>
<td>19:15</td>
<td>月曜19:15(3)</td>
</tr>
<tr>
<td>19:30</td>
<td>月曜19:30(4)</td>
<td>火曜19:30(5)</td>
</tr>
</table>

ここで(2)(19:00〜19:30)のセルを30分間背景を変えたい場合、<td id="tue1900" id="tue1915">というように指定しても問題なく動作するでしょうか?


4:[回答] ミツ [2006/03/23 11:56 ]

> <td id="tue1900" id="tue1915">というように指定しても問題なく動作するでしょうか?
動かないし、そもそも一つの要素に id属性を複数付ける事も間違いです。

結合させても動くようなサンプルを書いてみようかともおもったのですが、このぶんだと他にも条件が追加で出てきそうだったのでとりあえずパス。
(>3 では縦への結合例ですが 月曜〜水曜の同時間帯を結合するとかいうケース、横の結合はないのかな??)

適当に書いたサンプルではなく、なるべく現実に近いもの、できれば実際の例(URL)を提示できませんか?
それができなければ、実際の状況を想像しやすいよう、何のタイムテーブルなのか提示できませんか?



5:[質問] kawati [2006/03/23 14:00 ][URL]

>ミツさん
大変失礼いたしました…実際に作ってみたファイルはこれです。
こういう形で、23:00〜5:00の間動作させようかと考えていました。
今のところ横の結合は考えていないです。
JavaScriptについてあまり詳しくないのに質問してしまってすみません…


6:[回答] ミツ [2006/03/24 13:28 ]

一応現時点でのサンプルです。

各セルには次の要領でidを付けておきます。
曜日+開始時刻+終了時刻

各セルのidを手作業で付けなくても済む方法も検討中です。

<html>
<head>
<title></title>
<style type="text/css">
th,td{border:1pt solid #999}
thead th{width:130px;}
</style>
<script type="text/javascript">
function timeMarker(){
    var T = document.getElementById('timetable');
    if(!T)return;
    var now = new Date();
    var week = new Array('sun','mon','tue','wed','thu','fri','sat')[now.getDay()];
    var hour = ''+now.getHours();
    if(hour.length == 1) hour = '0'+hour;
    var min = ''+now.getMinutes();
    if(min.length == 1) min = '0'+min;
    var time = hour+min;
    var Tds = T.getElementsByTagName('td');
    for(var i=0;i<Tds.length;i++) {
        if(Tds[i].id.match(/(.{3})(.{4})(.{4})/)){
            var cWeek=RegExp.$1;
            var cTime1=RegExp.$2;
            var cTime2=RegExp.$3;
            if(cWeek==week && cTime1 <= time && time < cTime2 ) {
                Tds[i].style.backgroundColor = '#ff0';
                continue;
            }
        }
        Tds[i].style.backgroundColor = '';
    }
    setTimeout(timeMarker,15000);//15秒ごとに更新
}
</script>
</head>
<body onload="timeMarker()">
<table id="timetable">
<thead>
 <tr><td></td>
   <th colspan=2>月</th>
   <th colspan=2>火</th>
   <th colspan=2>水</th>
   <th colspan=2>木</th>
   <th colspan=2>金</th>
   <th colspan=2>土</th>
   <th colspan=2>日</th>
 </tr>
</thead>
<tbody>
 <tr><th>〜<br>12:30</th>
   <td id="mon12001230" colspan=2> </td>
   <td id="tue12001230" colspan=2> </td>
   <td id="wed12001230" colspan=2> </td>
   <td id="thu12001245" rowspan=2> </td><td id="thu12001230"> </td>
   <td id="fri12001230" colspan=2> </td>
   <td id="sat12001230" colspan=2> </td>
   <td id="sun12001230" colspan=2> </td>
 </tr>
 <tr><th>12:30</th>
   <td id="mon12301245" colspan=2> </td>
   <td id="tue12301300" colspan=2 rowspan=2> </td>
   <td id="wed12301300" colspan=2 rowspan=2> </td>
   <td id="thu12301245"> </td>
   <td id="fri12301245" colspan=2> </td>
   <td id="sat12301245" colspan=2> </td>
   <td id="sun12301245" colspan=2> </td>
 </tr>
 <tr><th>12:45</th>
   <td id="mon12451300" colspan=2> </td>
   <!--td colspan=2> </td-->
   <!--td colspan=2> </td-->
   <td id="thu12451300" colspan=2> </td>
   <td id="fri12451300" colspan=2> </td>
   <td id="sat12451300" colspan=2> </td>
   <td id="sun12451300" colspan=2> </td>
 </tr>
</tbody>
</table>
</body>
</html>


[戻る]