工具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. Python 3.10 明年发布，看看都有哪些新特性？

    我们目前生活在Python 3.8的稳定时代,上周发布了Python的最新稳定版本3.8.4.Python 3.9已经处于其开发的beta阶段,并且2020年7月3日预发布了beta版本(3.9.0b ...

  2. Transform与Vector3 的API

    Transform.InverseTransformDirection(Vector3 direction) Vector3.ProjectOnPlane(Vector3 vector, Vector ...

  3. vue实现局部预览打印

    html <div id="subOutputRank-print"> <h1></h1> </div> js doPrint(e) ...

  4. 14_Python语法示例(面向对象)

    1.自己写一个Student类,此类的对象有属性name, age, score, 用来保存学生的姓名,年龄,成绩 # 1)写一个函数input_student读入n个学生的信息,用对象来存储这些信息 ...

  5. 11_Python的69个内置函数详解

    1.内置函数分类 思维导图: https://www.processon.com/view/link/5dcabc48e4b0bd68d813b24f 2.基础数据类型-和数字相关的函数(14) 数据 ...

  6. Mysql慢查询（分析工具）

    慢查询分析工具[mysqldumpslow] 常用的慢查询日志分析工具 汇总除查询条件外其他完全相同的SQL,并将分析结果按照参数中所指定的顺序输出 语法: mysqldumpslow -s r -t ...

  7. C010：书号分解ISBN

    代码: #include "stdafx.h" int _tmain(int argc, _TCHAR* argv[]) { int prefix,groupIndentifier ...

  8. rabbitmq集成和实战

    与 Spring 集成 pom 文件 使用 Maven,这里使用的 4.3.11,所以这里引入的是 rabbit 是 2.0.0,如果兼容性的话请自行去 Spring 的官网上去查 这里补充一下,sp ...

  9. 交换机&&路由器

    交换机 交换机就是一种信号转发设备,它帮助两个网络节点进行信号的传输 路由器 路由器路由器,要了解什么是路由器,首先我们要先明白何为'路由'? 路由:是指把数据从一个地方传送到另一个地方的行为和动作 ...

  10. 将微服务部署到 Azure Kubernetes 服务 (AKS) 实践

    本文是对 <.NET Tutorial - Deploy a microservice to Azure> 的翻译和实践.入门级踩坑实践,k8s 大佬请回避,以免耽误您宝贵的时间. 介绍 ...