JQuery日程表单日
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script>
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.tableHead_table{
width:95%;
margin:0 auto;
border-top:1px solid #000;
border-left:1px solid #000;
}
.tableHead_table tr td{
border-right:1px solid #000;
border-bottom:1px solid #000;
}
.riCheng_td{
width:40px;
text-align:center;
}
.day_td , .plan_td , .do_td{
width:15px;
}
.plan_td{
background:#CACAFF;
}
.chuFaTd{
background:#FC9;
}
.chuFaTd2{
background:#F00;
}
</style>
<script type="text/javascript" defer>
function autoDayAndBackground(chuFaTr_jqu , chuFaTd_jqu , day){
var implementDate = chuFaTr_jqu.find("input[name='implementDate_hid']").val();
var implementDateArray = new Array();
var allDayValue = ''; //最后用来存所有已选中的天数的字符串
var isHadHas = 0; //判断被点击的天数是否已存在
implementDateArray = implementDate.split(",");
for(var i =0;i<implementDateArray.length;i++){ //查找判断该点击日期是否已被选中
hasDay = implementDateArray[i];
if(hasDay == 0 || hasDay =='')
continue;
if(day == hasDay){ //如果此日期已被选中过再次点击取消
chuFaTd_jqu.removeClass("chuFaTd");
isHadHas = 1;
}else{
allDayValue += (hasDay+",");
}
}
if(isHadHas == 0){
chuFaTd_jqu.addClass("chuFaTd");
allDayValue += (day+",");
}
chuFaTr_jqu.find("input[name='implementDate_hid']").val(allDayValue);
}
$(".plan_td , .do_td").click(function(){
var chuFaTd_jqu = $(this);
var chuFaTr_jqu = chuFaTd_jqu.parent();
var day = chuFaTd_jqu.attr("name");
if(chuFaTd_jqu.hasClass("do_td")){
autoDayAndBackground(chuFaTr_jqu , chuFaTd_jqu , day);
}else if(chuFaTd_jqu.hasClass("plan_td")){
var planBeginDate = chuFaTr_jqu.find("input[name='planBeginDate_hid']").val()*1;
if(day == planBeginDate){
chuFaTr_jqu.find("input[name='planBeginDate_hid']").val(0);
chuFaTd_jqu.removeClass("chuFaTd2");
}else{
chuFaTr_jqu.find("td[name='"+planBeginDate+"']").removeClass("chuFaTd2");
chuFaTr_jqu.find("input[name='planBeginDate_hid']").val(day);
chuFaTd_jqu.addClass("chuFaTd2");
}
}
});
</script>
</head>
<body>
<table name="tableHead_table" class="tableHead_table">
<tr>
<td class="updateDate_td">更新日期</td>
<td class="fuZeRen_td">责任人</td>
<td class="workContent_td">工作事项</td>
<td class="workType_td">类别</td>
<td class="riCheng_td">日程</td>
<?php
for($i=1;$i<32;$i++){
?>
<td class="day_td"><?php echo $i?></td>
<?php
}
?>
<td>消项依据</td>
<td>达成率</td>
</tr>
<?php listTR(1)?>
<?php listTR(2)?>
<?php listTR(3)?>
<?php listTR(4)?>
<?php listTR(5)?>
<?php listTR(6)?>
<?php listTR(7)?>
<tr>
<td colspan="38"> </td>
</tr>
</table>
<?php
function listTr($id){
?>
<tr name="tr<?php echo $id?>" class="listTrPlan">
<td rowspan="2"> 1</td>
<td rowspan="2"> 2</td>
<td rowspan="2"> 3</td>
<td rowspan="2"> 4</td>
<td class="riCheng_td">计划</td>
<?php
for($i=1;$i<32;$i++){
?>
<td name="<?php echo $i?>" class="plan_td"> </td>
<?php
}
?>
<td rowspan="2"> 5</td>
<td rowspan="2"> 6</td>
<input type="hidden" name="planBeginDate_hid" value="0"/>
</tr>
<tr name="tr<?php echo $id?>" class="listTrDo">
<td class="riCheng_td">实施</td>
<?php
for($i=1;$i<32;$i++){
?>
<td name="<?php echo $i?>" class="do_td"> </td>
<?php
}
?>
<input type="hidden" name="implementDate_hid" value=""/>
</tr>
<?php
}
?>
</body>
</html>
上一篇： JS时间处理脚本总结
下一篇： js中数组和字符串入门