一、效果及功能说明
模仿google日历自己来完成一个日历的所有效果
二、我的想法
今天搜索了一天的jquery找到了可以在一个方法里面写入多个不同的事件，到达同事处理的效果，想通过实现多个事件的方法让按钮获得表格的id但是还是不行
$(document).ready(function()
{
$("#table-right td").bind({
click:function(){$("#input-field").css("display","block");},
//click:function(){alert($(this).attr("id"));}
//click:function($())
//获得当前表格的高度方法
//$("#input-field").offsetTop("table-right td").css("top");
//这个方法就是可以直接获得当前表格里面的任何信息
// var vv = $(this);
//获得当前表格的高度
// vv.css("top","left") == $("#input-field").css("top","left");
//获得当前表格的id
//var addid = $(this).attr("id");
//是当获得在点击事件触发的时候直接将ss写入表格的内部
// $(this).html("ss");
//$(this).css("background-color","#000000");
//alert(11);
});
});
三、效果图
[暂时没有]
四、代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin:0;
padding:0px;
}
body{
font-family:Microsoft YaHei;
}
.ensemble{
float:left;
margin-top: 100px;
margin-left: 100px;
}
.table-left{
float:left;
width:146px;
}
.table-left table tr th{
float:left;
width:140px;
height:40px;
border:1px solid #C4E1FF;
overflow:hidden;
padding-top: 10px;
font-weight:normal;
}
.table-right{
float:left;
margin-left: -5px;
}
.top{
float:left;
margin-top: 0px;
width:140px;
height:26px;
border:1px solid #C4E1FF;
border-bottom: 1px dashed #C4E1FF;
}
.below{
float:left;
margin-top: -2px;
width:140px;
height:25px;
border-left: 1px solid #C4E1FF;
border-right: 1px solid #C4E1FF;
border-bottom:1px solid #C4E1FF;
}
.input-field{
position:relative;
top: 0px;
left: 0px;
width:400px;
height:150px;
border:1px solid #C4E1FF;
display:none;
}
.input-one{
float:right;
width:200px;
height:20px;
margin-top: 70px;
margin-right: 100px;
}
.input-two{
float:left;
margin-top: 120px;
margin-left: 10px;
}
</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
//这是在写标题的年月日
var time = new Date();
var year = time.getFullYear();
var moon = time.getMonth() + 1;
var sky = time.getDate() - 2;
var addsky = time.getDate() + 7 - 2;
$("#title").append(year + '年');
$("#title").append(moon + '月');
$("#title").append(sky + '日');
$("#title").append('-' + addsky + '日');
});
//定义按钮按下后让浮层隐藏起来和通过jquery来取得表格的id
//$("#input-two").click(function(hour,i)
//{
//这里是想获得表格的id并将value直接传输进去的方法但是没成功
//$("#0tr"+hour+"td"+i).html() == $("#input-one").val();
//$("#0tr"+hour+"td"+i).append($("#input-one").val());
//alert($("#input-one").val());
// $("#input-field").css("display","none");
//alert($('#0tr+'hour'+td+'i'+'));
//addid.html() = $("#input-two").val();
//可以获得第一个表格的id
//alert($("#table-right td").attr("id"));
//alert('$('+#sss+')');
//想用这个方法来看看能不能通过定义按钮来获得id就像前面的获得id的方法虽然只获得了一个id还是固定但是获得到了，结果还是没成功
//$("#table-right td").click( jQuery.proxy( addid, "ss" ));
// });
//将获得id的方法放进一个方法里然后当需要id的时候就可以直接调去这个方法获得id
// var addid = {
// ss: function() {
// alert($(this).attr("id"));
// }
// };
//$("#table-right td").click(jQuery.proxy(addid,"ss"));
//把调用id的方法调用过来然后在定义一个方法取得表格的然后指定跳出id但是没成功
//var oneid = {
//bb: function(){
// $("#table-right td").click(jQery.proxy(addid,"ss"));
// }
//$("#table-right td").click( jQuery.proxy( addid, "ss" ));
//$("#table-right td").click
//定义表单的任意表格让浮层出现
$(document).ready(function()
{
$("#table-right td").bind({
click:function(){$("#input-field").css("display","block");},
//click:function(){alert($(this).attr("id"));}
//click:function($())
//获得当前表格的高度方法
//$("#input-field").offsetTop("table-right td").css("top");
//这个方法就是可以直接获得当前表格里面的任何信息
// var vv = $(this);
//获得当前表格的高度
// vv.css("top","left") == $("#input-field").css("top","left");
//获得当前表格的id
//var addid = $(this).attr("id");
//是当获得在点击事件触发的时候直接将ss写入表格的内部
// $(this).html("ss");
//$(this).css("background-color","#000000");
//alert(11);
});
});
function titles(titleNum)
{
//这里是通过js来循环24小时的表格
var titleText = new Array("上午12点","上午1点","上午2点","上午3点","上午4点","上午5点","上午6点","上午7点","上午8点","上午9点","上午10点","上午11点","下午12点","下午1点","下午2点","下午3点","下午4点","下午5点","下午6点","下午7点","下午8点","下午9点","下午10点","下午11点");
document.write('<th>'+titleText[titleNum]+'</th>');
}
function toptable(hour)
{
//是循环上放的带虚线的表格 并且给与ID
for(i=1; i<8; i++)
{
document.write('<td id="0tr'+hour+'td'+i+'" class="top"></td>');
}
}
function belowtable(hour)
{
//是循环下面不带虚线的表格 并且给与ID
for(i=1; i<8; i++)
{
document.write('<td id="1tr'+hour+'td'+i+'" class="below" ></td>');
}
}
</script>
</head>
<body>
<div class="ensemble">
<div id="title" class="title">
</div>
<div id="input-field" class="input-field">
<input id="input-two" class="input-two" type="button" value="创建任务"/>
<input id="input-one" class="input-one" type="text" />
</div>
<div class="overall-table">
<div class="table-left">
<table cellspacing="0">
<script language="javascript" type="text/javascript">
for (j=0;j<24;j++)
{
document.write("<tr>");
titles(j);
document.write("</tr>");
}
</script>
</table>
</div>
<div id="table-right" class="table-right">
<table cellspacing="0">
<script language="javascript" type="text/javascript">
for (z=0;z<24;z++)
{
document.write("<tr>");
toptable(z);
document.write("</tr><tr>");
belowtable(z);
document.write("</tr>");
}
</script>
</table>
</div>
</div>
</div>
</body>
</html>