当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JQuery日程表单日

JQuery日程表单日

2017年12月21日  | 移动技术网IT编程  | 我要评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://

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

摘自 风吹屁股凉冰冰 

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网