动态id 显示
想点击页面 获取id(已做到了)；同时出现对话框在页面id 处添加内容，可是显示不了~不解~~求大神帮帮我
<html>
<title>日历</title>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<style>
#calTable {
border-collapse:collapse;
border:5px solid white;
}
body, td, input {
font-family:Arial;
font-size:14px;
}
td.calBox {
border:1px solid #CCDDEE;
width:100px;
height:80px;
vertical-align:top;
}
td.calBox div.date {
background:#E8EEF7;
font-size:13px;
padding:2px;
cursor:pointer;
}
td.calBox div.today {
background:#BBCCDD;
}
td.day {
text-align:left;
border:0px solid #E8EEF7;
font-weight:bold;
}
#addBox {
display:none;
position:absolute;
width:230px;
border:1px solid #CCDDEE;
height:100px;
top:20px;
margin:35px;
background: #E8EEF7;
padding:20px;
}
#taskDate {
height:30px;
font-weight:bold;
padding:3px;
}
.taskBtn {
margin:5px;
}
</style>
<script src="http://code.
<script type="text/javascript" Language ="JavaScript">
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var today = new Today();
var year = today.year;
var month = today.month;
$(function() {
fillBox();
clickEvent();
});
function Today() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
function fillBox() {
updateDate();
$("td.calBox").empty();
var dayCounter = 1;
var cal = new Date(year, month, 1);
var startDay = cal.getDay();
var endDay = startDay + getDays(cal.getMonth(), cal.getFullYear()) - 1;
var day = -1;
if (today.year == year && today.month == month) {
day = today.day;
}
for (var i=startDay; i<=endDay; i++) {
var tempmonth;
var tempday;
if(month+1<10 ) {tempmonth="0"+(month+1);} else{tempmonth=(month+1); }
if(dayCounter<10 ) {tempday="0"+dayCounter;} else{ tempday= dayCounter;}
if (dayCounter==day) {
$("#calBox" +i).html("<div class='date today' id='" + year + "-" + tempmonth + "-" + tempday + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
} else {
$("#calBox" + i).html("<div class='date' id='" + year + "-" + tempmonth + "-" + tempday + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
}
dayCounter++;
}
}
function getDays(month, year) { //返回天数
if (1 == month) {
if (((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400)) {
return 29;
} else {
return 28;
}
} else {
return daysInMonth[month];
}
}
function prevMonth() {
if ((month - 1) < 0) {
month = 11;
year--;
} else {
month--;
}
fillBox();
}
function nextMonth() {
if((month + 1) > 11) {
month = 0;
year++;
}
else {
month++;
}
fillBox();
}
function thisMonth() {
year = today.year;
month = today.month;
fillBox();
}
function updateDate() {
$("#datebtn").html(year + "年" + (month + 1) + "月");
}
function openAddBox(loc) {
$("#taskDate").html(loc.id);
var left = getLeft(loc) + 20;
var top = getTop(loc) + 20;
$("#addBox").css("left",left).css("top",top).slideDown();
}
function closeAddBox(obj) {
$("#addBox").slideUp("normal",function(){
$(obj).attr("disabled","");
});
}
function getLeft(loc){
var obj = loc;
var objLeft = obj.offsetLeft;
while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){
objLeft += obj.offsetParent.offsetLeft;
obj = obj.offsetParent;
}
return objLeft;
}
function getTop(loc){
var obj = loc;
var objTop = obj.offsetTop;
while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){
objTop += obj.offsetParent.offsetTop;
obj = obj.offsetParent;
}
return objTop;
}
function clickEvent(id)
{
var tabArr=document.getElementsByTagName("td");
for(var i=0;i<=tabArr.length-1;i++)
{
if(tabArr[i].id.substring(0,6)=="calBox")
{
tabArr[i].onmousedown=function()
{
alert(this.id);
}
}
}
}
function add(){
var message=$("input:text").val();
$("").append(message);
}
</script>
</head>
<body >
<tr >
<td >
<input type="button" value="上月" onClick="prevMonth()"/>
<input type="button" value="本月" onClick="thisMonth()"/>
<input type="button" value="下月" onClick="nextMonth()"/>
<span id="datebtn"></span> </td>
</tr>
<table id="calTable" width="90%" height="90%" align="center"onclick="clickEvent()" >
<tr >
<td class="day">周日</td>
<td class="day">周一</td>
<td class="day">周二</td>
<td class="day">周三</td>
<td class="day">周四</td>
<td class="day">周五</td>
<td class="day">周六</td>
</tr >
<tr >
<td class="calBox" id="calBox0"></td>
<td class="calBox" id="calBox1"></td>
<td class="calBox" id="calBox2"></td>
<td class="calBox" id="calBox3"></td>
<td class="calBox" id="calBox4"></td>
<td class="calBox" id="calBox5"></td>
<td class="calBox" id="calBox6"></td>
</tr>
<tr>
<td class="calBox" id="calBox7"></td>
<td class="calBox" id="calBox8"></td>
<td class="calBox" id="calBox9"></td>
<td class="calBox" id="calBox10"></td>
<td class="calBox" id="calBox11"></td>
<td class="calBox" id="calBox12"></td>
<td class="calBox" id="calBox13"></td>
</tr>
<tr>
<td class="calBox" id="calBox14"></td>
<td class="calBox" id="calBox15"></td>
<td class="calBox" id="calBox16"></td>
<td class="calBox" id="calBox17"></td>
<td class="calBox" id="calBox18"></td>
<td class="calBox" id="calBox19"></td>
<td class="calBox" id="calBox20"></td>
</tr>
<tr>
<td class="calBox" id="calBox21"></td>
<td class="calBox" id="calBox22"></td>
<td class="calBox" id="calBox23"></td>
<td class="calBox" id="calBox24"></td>
<td class="calBox" id="calBox25"></td>
<td class="calBox" id="calBox26"></td>
<td class="calBox" id="calBox27"></td>
</tr>
<tr>
<td class="calBox" id="calBox28"></td>
<td class="calBox" id="calBox29"></td>
<td class="calBox" id="calBox30"></td>
<td class="calBox" id="calBox31"></td>
<td class="calBox" id="calBox32"></td>
<td class="calBox" id="calBox33"></td>
<td class="calBox" id="calBox34"></td>
</tr>
<tr>
<td class="calBox" id="calBox35"></td>
<td class="calBox" id="calBox36"></td>
<td class="calBox" id="calBox37"></td>
<td class="calBox" id="calBox38"></td>
<td class="calBox" id="calBox39"></td>
<td class="calBox" id="calBox40"></td>
<td class="calBox" id="calBox41"></td>
</tr>
</table>
<div id="addBox">
<div id="taskDate"></div>
添加事项：
<input type="text" id="taskInfo" size="30" />
<div class="taskBtn">
<input type="button" id="submit" value="添加" onClick="add(this)"/>
<input type="button" value="取消" onClick="closeAddBox()"/>
</div>
</div>
</body>
</html>
