工具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. Android开发之数组类的面试题目，android工程师java程序员必备

    1,定义一个长度为5的数组 int [] arr=new int[5]; 2,写出静态初始化一个数组的方法 int [] arr={1,2,3,4}; 3,写出可变参数的使用规则    1,只能做为方 ...

  2. 1初始化项目并且引入scss

    vue.vonfig.js 这个文件引入mian.scss css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS sourc ...

  3. Jmeter4.0安装教程

    1. 检查安装环境 1.1 Jdk要求 JDK版本:1.6+ 1.2 检查是否安装JDK win  +  R  快捷键打开运行,输入cmd 打开面板,在面板中输入  java -version,出现如 ...

  4. WEBAPI 增加身份验证

    1,在Webapi项目下添加如下引用: Microsoft.AspNet.WebApi.Owin Owin Microsoft.Owin.Host.SystemWeb Microsoft.Owin.S ...

  5. webapi上传图片的两种方式

    /// <summary>        /// App上传图片        /// </summary>        /// <returns>返回上传图片的 ...

  6. 实验 2：Mininet 实验——拓扑的命令脚本生成

    实验 2:Mininet 实验--拓扑的命令脚本生成 一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二.实验任务 通过使用命令行创建.Python 脚本 ...

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

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

  8. MongoDB基础总结

    1.数据可基本操作 1. 创建数据库 use  databaseName 选择一个数据库,如果数据库不存在就自动创建一个数据库 只有向数据库中插入数据时,数据库才会被真实创建出来,而当数据库中没有数据 ...

  9. Android组件化 + MVP + MVVM

    前言 组件化和插件化已经提出了很久了,到现在也是比较稳定的一种架构方案了,在三年前,组件化和插件提出来没多久,前公司就已经在项目中使用了,只是当时还只是菜鸟,没有资格参与到架构的建设中,只是在大佬搭好 ...

  10. hadoop文件系统上的小文件合并-Hadoop Archives

    1. 什么是Hadoop archives Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop archive的扩展名是.har.Ha ...