工具1：HBuilder X 1.9.9.20190522

工具2：火狐浏览器 67.0.4 (64 位)

目前，我们已经将一些行和列插入到表格中，并设置单元格的背景颜色，显示 RGB 值等。

例 7：最后，我们需要将表头插入到表格中。基于上一个例子，我们再加入一些 JavaScript 代码。

 1 <!DOCTYPE html>

 2 <html>

 3   <head>

 4     <meta charset="utf-8">

 5     <title>灰阶颜色表</title>

 6     <style type="text/css">

 7       table {

 8         width: 400px;               /* 设置表格的宽度 */

 9         border-width: 1px;          /* 设置表格的四条边框的宽度 */

10         border-style: solid;        /* 设置表格的四条边框的样式 */

11         border-color: gray;         /* 设置表格的四条边框的颜色 */

12         border-collapse: collapse;  /* 规定是否合并表格边框。 */

13         /* 使表格居中对齐 */

14         margin-left: auto;

15         margin-right: auto;

16       }

17       th {

18         color: white;               /* 设置表头单元格的文本的颜色 */

19         background-color: #3F3F3F;  /* 设置表头单元格的背景颜色 */

20       }

21       th, td {

22         /* 设置表格中的单元格的外边框风格 */

23         border-width: 1px;

24         border-style: solid;

25         border-color: gray;

26         text-align: left;                   /* 规定表格中的单元格的文本的水平对齐方式 */

27         font-family: "courier new", 新宋体;  /* 规定表格中的单元格的文本的字体系列 */

28         padding: 4px;                       /* 在一个声明中设置所有内边距属性。 */

29       }

30     </style>

31   </head>

32   <body onload="insertTableRow()">

33     <table id="grayScale">

34

35     </table>

36   </body>

37   <script type="text/javascript">

38     // #### 创建一个灰阶颜色表 ####

39     function insertTableRow() {

40       // 获取表格对象

41       var table = document.getElementById("grayScale");

42       // #### 加入表主体信息 ####

43       for (var i = 0; i < 256; ++i) {

44         // 插入一行

45         var tableRow = table.insertRow(i);

46         // RGB 颜色值

47         var value = dec2Hex("#", i) + dec2Hex("", i) + dec2Hex("", i);

48         // 插入第一个单元格，并设置背景颜色

49         tableRow.insertCell(0).style.backgroundColor = value;

50         // 插入第二个单元格，并将第一个单元格所对应的背景颜色的十六进制值写入其中

51         tableRow.insertCell(1).innerHTML = value.toUpperCase();

52         // 插入第三个单元格，并将第一个单元格所对应的背景颜色的RGB值写入其中

53         tableRow.insertCell(2).innerHTML = "rgb(" + i + "," + i + "," + i + ")";

54       }

55       // #### 加入表头信息 ####

56       // 表头中的单元格的内容

57       var tableHeaderContent = ["灰阶", "HEX", "RGB"];

58       // 表头中的单元格的宽度

59       var tableHeaderWidth = ["30%", "25%", "45%"];

60       // 在表格中创建并获取 <thead> 元素。

61       var tableHead = table.createTHead();

62       var txt;

63       for (var i = 0; i < 3; ++i) {

64         // 创建并获取一个 <th> 元素

65         var tableHeader = document.createElement("th");

66         // 将信息加入到单元格中

67         txt = document.createTextNode(tableHeaderContent[i]);

68         tableHeader.appendChild(txt);

69         // 将单元格插入到表头中

70         tableHead.appendChild(tableHeader);

71         // 设置表头中的单元格的宽度

72         tableHeader.style.width = tableHeaderWidth[i];

73       }

74     }

75     // 十进制数转 2 位十六进制数

76     // 形参 prefix 指定前缀

77     // 形参 value 的取值范围 0 ~ 255，如果传递一个在此范围之外的数字，将得到不可预期的结果。

78     function dec2Hex(prefix, value) {

79       var hexCode = value.toString(16);

80       var zeroes = "00";

81       var length = zeroes.length - hexCode.length;

82       return prefix + zeroes.substr(0, length) + hexCode;

83     }

84   </script>

85 </html>

通过使用火狐浏览器的查看器，我们可以看到，新增的表头位于表主体前面。

让我们一起看看这块 JavaScript 代码：

55       // #### 加入表头信息 ####

56       // 表头中的单元格的内容

57       var tableHeaderContent = ["灰阶", "HEX", "RGB"];

58       // 表头中的单元格的宽度

59       var tableHeaderWidth = ["30%", "25%", "45%"];

60       // 在表格中创建并获取 <thead> 元素。

61       var tableHead = table.createTHead();

62       var txt;

63       for (var i = 0; i < 3; ++i) {

64         // 创建并获取一个 <th> 元素

65         var tableHeader = document.createElement("th");

66         // 将信息加入到单元格中

67         txt = document.createTextNode(tableHeaderContent[i]);

68         tableHeader.appendChild(txt);

69         // 将单元格插入到表头中

70         tableHead.appendChild(tableHeader);

71         // 设置表头中的单元格的宽度

72         tableHeader.style.width = tableHeaderWidth[i];

73       }

这是 JavaScript 数组：

57 var tableHeaderContent = ["灰阶", "HEX", "RGB"];

59 var tableHeaderWidth = ["30%", "25%", "45%"];

在表格中创建 <thead> 元素，并将返回的元素的引用存储在 tableHead 中。

61 var tableHead = table.createTHead();

关于 HTML DOM createTHead() 方法：

定义和用法：createTHead() 方法用于在表格中获取或创建 <thead> 元素。

语法：tableObject.createTHead()

返回值：返回一个 TableSection，表示该表的 <thead> 元素。如果该表格已经有了表头，则返回它。如果该表没有表头，则创建一个新的空 <thead> 元素，把它插入表格，并返回它。

创建并获取 <th> 元素，接着将文本信息添加进 <th> 单元格中，最后将单元格插入到表头中。

65 var tableHeader = document.createElement("th");

67 txt = document.createTextNode(tableHeaderContent[i]);

68 tableHeader.appendChild(txt);

70 tableHead.appendChild(tableHeader);

关于如何创建 <th> 元素，参考：HTML DOM TableHeader 对象

关于 HTML DOM appendChild() 方法：

定义和用法：appendChild() 方法向节点添加最后一个子节点。

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

到这里，《HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表》已经完结！

HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04的更多相关文章

  1. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）

    HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...

  2. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  3. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  4. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  5. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  6. 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

    // CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...

  7. 分享一个CSS+JavaScript框架materializecss

    一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:

  8. 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（三）

    原文 http://blog.csdn.net/zhangxin09/article/details/6793593 这是<运用 JavaScript构建你的第一个Metro式应用程序>系 ...

  9. 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（二）

    原文 http://blog.csdn.net/zhangxin09/article/details/6793330 先前的学习中,我们已经了解了 Metro式的 JavaScript 应用程序大致如 ...

随机推荐

  1. 使用echarts 轻松搞定各种后台数据统计

    之前接到老大一个需求,需要将公私生态系统构建一个日志系统,统计公有云.私有云还有其他工具平台(如禅道,jenkins)的用户登录信息,并使用图标的形式动态显示,之前刚入门的时候接触过echarts 这 ...

  2. 网络协议HTTP、TCP/IP、Socket

    网络协议HTTP.TCP/IP.Socket 网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层.  其中物理层.数据链路层和网络层通常被称作媒体层,是网络工程师所研究的 ...

  3. Activiti7 组任务

    需求:在流程定义中在任务节点的assignee固定设置任务负责人,这种情况不是很好,如果有天任务负责人请假了,你想请假,等着吧..没人审批,针对这种情况,可以给任务设置多个候选人,可以从候选中选择参与 ...

  4. Activiti7 流程变量(UEL-Value方式)

    需求:请假天数大于3天走总经理审批,小于等于3天直接走人事 画图 因为IDEA不展示那个线上的东西,所以截屏自己写的,还有就是我感觉IDEA画图挺坑的,之前画了好几遍,一部署就报错,很奇怪 /** * ...

  5. linux 用户、用户组的操作

    1.查看linux系统下的所有用户 方式一:grep bash /etc/passwd 方式二:查看etc/passwd文件,其他第三个参数大于500的都是用户自己新增的 vim /etc/passw ...

  6. 出现jupyter notebook password or token提示需要token的处理方法

    很多朋友不知道下面的情况怎么处理,我给大家介绍一个方法! 出现这种情况很简单用下面这个地址就能进去了 (注意是你自己的 不是我这个)

  7. opentracting+jager分布式链路追踪探索实践

    一.Opentracing opentracing通过提供平台无关.厂商无关的API,使得开发人员可以方便地实现追踪系统.opentracing提供了用于运营支撑系统和针对特定平台的辅助程序库,被跟踪 ...

  8. 数据库增量备份，恢复innobackex

    Xtrabackup 一款强大的在线热备工具 备份过程中不锁表,适合生产坏境 Xtrabackup:C程序,支持innodb/xtradb Innobackupex:innodb/mysiam #rp ...

  9. [Spark快速大数据分析]阅读笔记

    第2章 Spark分布式执行涉及的组件 每个Spark应用都由一个驱动程序来发起集群上的各种并行操作,驱动程序通过一个SparkContext对象访问Spark:驱动程序管理多个执行器节点,可以用Sp ...

  10. CTF-BugKu-WEB-35-41

    2020.09.19 go on,今天务必搞定web 经验教训 能运行php标签的扩展名有php4,phtml,phtm,phps,php5等,可以在php被过滤的时候尝试: html请求头中,对内容 ...