<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上课安排</title>

    <style type="text/css">

        table{ border: 1px solid #FFFFFF}

        th{background-color: royalblue; width: 80px; height: 60px;}

        td{ width: 80px; height: 60px;}

        button.dan{background-color:#aabbcc ; width: 80px; height: 60px; }

        button.shuang{background-color:#D2E0E6 ; width: 80px; height: 60px; }

    </style>

    <script>

        //头

        document.write('<table id="myTable" >  <thead>'+

                '<tr>'+

                '<th></th>'+

                '<th scope="col">星期一</th>'+

                ' <th scope="col">星期二</th>'+

                '<th scope="col">星期三</th>'+

                '<th scope="col">星期四</th>'+

                '<th scope="col">星期五</th>'+

                '<th scope="col">星期六</th>'+

                '<th scope="col">星期天</th>'+

                '</tr>'+

                '</thead>');

        var i= 1;//一天的课程安排,按照一天8节课计算

        while (i<9)

        {

            document.write(

                    '<tr>'+

                    '<th scope="row">第'+ i +'节课</th>');

            var j = 1;//星期一到星期天

            while (j < 8)

            {

                //i代表第几节课,j代表星期几

                if(i%2 == 0)

                    document.write( '<td><button class="shuang">生物课</button></td>');

                else

                    document.write( '<td><button class="dan">生物课</button></td>');

                j++;

            }

            document.write( '</tr>');

            i++;

        }

        //尾

        document.write('</table');

    </script>

</head>

<body>

</body>

</html>

　　

[HTML]JS添加表格的更多相关文章

  1. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  2. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  3. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  4. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  5. JS对表格排序(支持对序号，数字，字母，日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  6. 如何用js创建表格？

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  7. Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹

    功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...

  8. js操作表格、table、

    js添加一行.删除一行 let str="<tr>" +"<td>"+a[1]+"</td>" +&qu ...

  9. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

随机推荐

  1. Sqoop -- 用于Hadoop与关系数据库间数据导入导出工作的工具

    Sqoop是一款开源的工具,主要用于在Hadoop相关存储(HDFS.Hive.HBase)与传统关系数据库(MySql.Oracle等)间进行数据传递工作.Sqoop最早是作为Hadoop的一个第三 ...

  2. 记32位程序（使用3gb用户虚拟内存）使用D3DX9导致的一个崩溃的问题

    为了增加32位程序的用户虚拟内存的使用量,我们使用了/LARGEADDRESSAWARE编译选项来使32位程序可能使用到3gb的内存,能否使用到3gb内存也跟平台.系统和设置有关系,现摘抄部分作为参考 ...

  3. PostgreSQL Replication之第十章 配置Slony（1）

    在PostgreSQL领域中,Slony是最广泛的复制解决方案之一.它不仅是最老的复制方案实现的一个,但也是有最多的外部工具支持的一个,例如PgAdmin3等. 在本章中,我们将深入探究Slony并学 ...

  4. Aspectj是什么

    转载自:http://www.cnblogs.com/sunwke/articles/2568875.html 网上出现了很多讲解 AspectJ 的资料,但大多是从讲解 AspectJ 语法开始,然 ...

  5. win8， VS2013 .NET 4.5在哪找svcutil.exe？

    我这个纠结呀,公司用win8, .NET 4.5.想做一个很简单的项目,就是wcf宿主iis,项目根目录下有aspx文件和svc文件.于是参考了一个博客http://www.cnblogs.com/y ...

  6. java读properties的通用类，兼容linux和windows

    package util; import java.io.IOException; import java.io.InputStream; import java.util.Properties; / ...

  7. 夺命雷公狗ThinkPHP项目之----企业网站2之数据库的快速设计

    我们在一个项目的时候,花费最多事件的估计还是数据库的时间了,我们的数据库暂时就这样设计好了: 暂时我们的数据库就这样设计好了用下先,建好后如下所示:

  8. 夺命雷公狗---DEDECMS----1dedecms的安装过程

    我们这次要玩的dedecms(cms也就是内容管理系统),电商网.或者政府网..小说网.新闻网之类的都是基于可以用cms来实现的. 现在在市场上主流的cms系统有dedecms(织梦),帝国cms,p ...

  9. PTPX中的time_based analysis

    根据VCD文件的type,PTPX支持instantaneous peak power analysis和cycle_accurate peak power analysis. Time-Based ...

  10. 在 linux 中利用samba访问windows的共享

    只是介绍一些最基本的应用吧, 有些命令可能要求输入用户的密码 1. 首先要安装 samba 这个套件, 若只是访问windows中的共享的话, 可以只装 samba-client 就好了. 2. 在第 ...