工具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. 【jmespath】—1. 基础用法

    一.jsonpath 之前我写接口自动化测试时候,对于复杂的json返回,会使用jsonpath这个第三方库,就像写xpath一样,方便的查询json元素. 因为之前写WEB自动化时候,总用xpath ...

  2. 剑指 Offer 46. 把数字翻译成字符串

    题目描述 给定一个数字,我们按照如下规则把它翻译为字符串:0 翻译成 "a" ,1 翻译成 "b",--,11 翻译成 "l",--,25 ...

  3. Linux下mysql安装记录

    1.MySQL下载路径:https://dev.mysql.com/downloads/ Linux下的安装步骤:http://www.runoob.com/linux/mysql-install-s ...

  4. 使用镜像安装cygwin、gcc并配置CLion IDE -2020.09.12

    使用镜像安装cygwin.gcc并配置CLion IDE -2020.09.12 Cygwin 官网:http://www.cygwin.com/ 下载64bit安装器,并打开选择next 尽量不要装 ...

  5. Docker 学习笔记一

    Docker 学习笔记一 1.Docker是什么?         Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源.让开发者打包他们的应用以及依赖包到一 ...

  6. Hexo + Github Pages搭建个人网站主页

    1.GitHub创建个人仓库 登录GitHub创建账号,同时拥有一个自己设定的用户名(username).点击New Repositories创建仓库.仓库名必须为username.github.io ...

  7. Solr专题（一）手把手教你搭建Solr服务

    一.Solr是什么,能解决什么问题? Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对 ...

  8. 【Flutter 实战】菜单（Menu）功能

    老孟导读:今天介绍下Flutter中的菜单功能. PopupMenuButton 使用PopupMenuButton,点击时弹出菜单,用法如下: PopupMenuButton<String&g ...

  9. 漏洞扫描工具acunetix破解安装步骤

    Acunetix 12破解版安装教程 下载地址: 链接:https://pan.baidu.com/s/1jsKkrhOcx_O7ib7FQ6pidw 提取码:pwdj 1.下载软件压缩包文件,首先点 ...

  10. vSphere Client上安装虚拟机工具VMware Tools

    vSphere Client上安装虚拟机工具VMware Tools 1.安装虚拟机 具体安装步骤就不详述了,安装虚拟机之后右击虚拟机名->客户机->安装/升级VMware Tools,这 ...