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>
 

摘自 風吹屁股涼冰冰 

發佈留言