工具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. Stack (30)（模拟栈，输出中间数用set）

    Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...

  2. BIO应用-RPC框架

    为什么要有RPC?  我们最开始开发的时候,一个应用一台机器,将所有功能都写在一起,比如说比较常见的电商场景. 随着我们业务的发展,我们需要提示性能了,我们会怎么做?将不同的业务功能放到线程里来实现异 ...

  3. meta生成器 —— 表单元素组件

    手写代码? meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干. 这个工具,说白了本身就是一个表单,一个meta属性对应一个met ...

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

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

  5. CTF-WeChall-第一天

    2020.09.09 今天来了一个新平台,WeChall,从简单的开始做,才能找到自信--i春秋的题做自闭了

  6. Android实现二值点阵图识别

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 前言 我这几天在做一个东西,就是一张像二维码这样的 n*n ...

  7. 单链表的前K个的逆序输出

    单链表逆序输出也是常被面试官问到题算法题,所以自己就总结了一下,在此贴出算法,与小伙伴们相互交流. 首先要有三个指针,前两个分别指向首节点,首节点的下一个节点,第三个是临时指针,是为了储存首节点的下一 ...

  8. 手写spring

    体系结构 Spring 有可能成为所有企业应用程序的一站式服务点,然而,Spring 是模块化的,允许你挑选和选择适用于你的模块,不必要把剩余部分也引入.下面的部分对在 Spring 框架中所有可用的 ...

  9. 360 Atlas生产环境使用心得

    一.Atlas介绍 Atlas是360开源的一个Mysql Proxy,以下是官方介绍: Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目 ...

  10. git线上操作

    选择线上仓库 """ 1.注册码云账号并登录:https://gitee.com/ 2.创建仓库(课堂截图) 3.本地与服务器仓库建立连接 ""&qu ...