HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04

工具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 从一个表格到一个灰阶颜色表》已经完结！