文档章节

JS 动态生成日期表格

 少雨点
发布于 2017/07/13 15:37
字数 534
阅读 6
收藏 0

function calendar(year,month) {
    //本月第一天是星期几(距星期日离开的天数)
    var startDay = new Date(year, month - 1, 1).getDay();
    if(startDay==0){
        startDay=6;
    }else{
        startDay=startDay-1;
    }
    //本月有多少天(即最后一天的getDate(),但是最后一天不知道,我们可以用“上个月的0来表示本月的最后一天”)
    var nDays = new Date(year, month, 0).getDate();
    //开始画日历
    var numRow = 0;  //记录行的个数,到达7的时候创建tr
    var i;        //日期
    var html = '';
    html += '<table id="calTable" width="212"><thead><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="red">六</th><th class="red">日</th></tr></thead> <tbody>';
    //第一行
    html += '<tr>';
    for (i = 0; i < startDay; i++) {
        html += '<td></td>';
        numRow++;
    }
    for (var j = 1; j <= nDays; j++) {
        //如果是今天则显示红色
        numRow++;
        if (numRow == 7) {  //如果已经到一行(一周)了,重新创建tr
             html += '<td id="tdDay'+j+'" onclick="' + "dayType(" + j + ");" + '">';
             html += j;    //开始加日期
             html += '<font color="red">(休息)</font> <input type="hidden" name="dayType" id="day'+j+'" value="1"></td>';
            numRow = 0;
            html += '</tr><tr>';
        }else if(numRow==6){
             html += '<td id="tdDay'+j+'" onclick="' + "dayType(" + j + ");" + '">';
             html += j;    //开始加日期
             html += '<font color="red">(休息)</font> <input type="hidden" name="dayType" id="day'+j+'" value="1"></td>';
        }else{
             html += '<td id="tdDay'+j+'"  onclick="' + "dayType(" + j + ");" + '">';
             html += j;    //开始加日期
             html += '(工作日) <input type="hidden" name="dayType" id="day'+j+'" value="0"></td>';
        }

    }
    html += '</tbody></table>';
    document.getElementById("addDay").innerHTML = html;

}

样式代码

<style type="text/css">
.red{ color:red;}
#calTable{ width:100%; border-collapse:collapse;}  
#calTable th,#calTable td{ width:70px; height:40px; border:1px #ccc solid; text-align:center;}  
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}  
#upCalTable{ width:100%; border-collapse:collapse;}  
#upCalTable th,#upCalTable td{ width:70px; height:40px; border:1px #ccc solid; text-align:center;}  
#upCalTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}  
</style>

 

JSP 代码

 

<div id="addDay">
     <table id="upCcalTable">  
     <thead>  
            <tr>  
                <th class="red">日</th>  
                <th>一</th>  
                <th>二</th>  
                <th>三</th>  
                <th>四</th>  
                <th>五</th>  
                <th class="red">六</th>  
            </tr>  
      </thead>  
        <tbody>  
         <tr>  
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>  
          </tr>  
            <tr>  
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>  
            </tr>  
            <tr>  
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>  
            </tr>  
            <tr>  
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>  
            </tr>  
            <tr>  
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>  
            </tr>  
            <tr>  
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>  
            </tr>  
        </tbody>  
    </table>     
    </div>

 

 

 

 

 

© 著作权归作者所有

上一篇: 吸血鬼数
粉丝 0
博文 10
码字总数 8920
作品 0
程序员
私信 提问
django +jQuery Grid Plugin 实现表格前提自动分页, 排序

由于django 中文在前台显示乱码,本文使用了 先在用django模板生成表格,再用jQuery Grid对表格 进行处理。

yubochinese
2018/06/26
0
0
javascript获取当前表结构

有这样一个表格,外层是 .因为在后端要生成一个PDF报表,所以想通过js来获取到这个表结构,然后传到后台去动态生成。 请问下js该怎么写。

BenjaminMa
2012/03/13
279
4
10 个超赞的 JavaScript 图形图表绘制插件

1、Humble Finance Humble Finance是一个与Flash工具相似的HMTL5数据可视化工具。该工具完全由JavaScript开发,使用Prototype与Flotr库 2、D3 D3是最流行的可视化库之一,它被很多其他的表格...

彭博
2012/03/13
16.5K
20
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6
code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_
2018/06/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部