<html>
<head>
<title>スケジュール確認</title>
<script type="text/javascript">
<!--
flag = '1' ;
function change(n){
ID = "sch" + n ;
if (flag == n +'1') {
str = "ひまだよ"; flag = n +'0' ;
}else{
str = "予定あり"; flag = n +'1' ;
}
document.all[ID].innerText = str;
}
// -->
</script>
<style type="text/css">
<!--
.list_find { font-size: 10px; color: #FFFFFF; background-color: #666666; text-align: center}
.d_sat { font-size: 12px; color: #0033CC; background-color: #DDFFFF; text-align: center; height: 16px; width: 60px; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.d_holiday { font-size: 12px; color: #FF0000; background-color: #FFDDDD; height: 16px; width: 60px; text-align: center ; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.d_others { font-size: 12px; text-align: center; height: 16px; width: 60px; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.schedule { font-size: 12px; background-color: #FFFFDD; text-align: center; width: 100px}
-->
</style>
</head><body bgcolor="#FFFFFF" text="#000000" width=300>
予定は？（日付をクリック）
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="list_find">日付</td><td class="list_find">しおん</td>
<td class="list_find">日付</td><td class="list_find">かふぇおれ</td>
</tr>
<tr>
<td class="d_sat" onclick="change(1)"> 7／15</td><td class="schedule" id="sch1">未定</td>
<td class="d_sat" onclick="change(8)"> 7／15</td><td class="schedule" id="sch8">未定</td>
</tr>
<tr>
<td class="d_holiday" onclick="change(2)">7／16</td><td class="schedule" id="sch2">未定</td>
<td class="d_holiday" onclick="change(9)">7／16</td><td class="schedule" id="sch9">未定</td>
</tr>
<tr>
<td class="d_holiday" onclick="change(3)">7／17</td><td class="schedule" id="sch3">未定</td>
<td class="d_holiday" onclick="change(10)">7／17</td><td class="schedule" id="sch10">未定</td>
</tr>
<tr>
<td class="d_others" onclick="change(4)">7／18</td><td class="schedule" id="sch4">未定</td>
<td class="d_others" onclick="change(11)">7／18</td><td class="schedule" id="sch11">未定</td>
</tr>
<tr>
<td class="d_others" onclick="change(5)">7／19</td><td class="schedule" id="sch5">未定</td>
<td class="d_others" onclick="change(12)">7／19</td><td class="schedule" id="sch12">未定</td>
</tr>
<tr>
<td class="d_others" onclick="change(6)">7／20</td><td class="schedule" id="sch6">未定</td>
<td class="d_others" onclick="change(13)">7／20</td><td class="schedule" id="sch13">未定</td>
</tr>
<tr>
<td class="d_others" onclick="change(7)">7／21</td><td class="schedule" id="sch7">未定</td>
<td class="d_others" onclick="change(14)">7／21</td><td class="schedule" id="sch14">未定</td>
</tr>
</table>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Calendar</title>
<script type="text/javascript">
// とりあえずの古いやり方（ブラウザの種類によってはもう少し柔軟に書ける）
onload = function () {
var table = document.getElementsByTagName ('table')[0];
var th = table.rows[0].cells;
for (var i = 0, I = th.length; i < I; i++)
th[i].onclick = function () {
var row = this.parentNode;
var table = row.parentNode;
var td = table.rows[row.rowIndex + 1].cells[this.cellIndex];
var text = td.firstChild;
switch (text.data) {
case ' ' : text.data = '○'; break;
case '○' : text.data = '◎'; break;
case '◎' : text.data = ' '; break;
}
};
};
</script>
<h1>Calendar</h1>
<table>
<tr><th>1 日</th><th>2 日</th><th>3 日</th><th>4 日</th></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>