jQuery google日历练习-20130830
一、效果及功能说明
模仿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){//是循环上放的带虚线的表格 并且给与IDfor(i=1; i<8; i++){document.write('<td id="0tr'+hour+'td'+i+'" ></td>');}} </script></head><body><div type="button" value="创建任务"/><input id="input-one" type="text" /></div><div type="text/javascript">for (j=0;j<24;j++){document.write("<tr>");titles(j);document.write("</tr>");}</script></table></div><div id="table-right" 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>