欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery日程表单日

程序员文章站 2022-04-19 10:34:54

<!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>
 

摘自 风吹屁股凉冰冰