正文

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

IP云
IP云V管理员/9 阅读
06/22
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

工具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 &amp&semi; CSS &amp&semi; JavaScript 从一个表格到一个灰阶颜色表（目录）

    HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...

  2. HTML &amp&semi; CSS &amp&semi; JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  3. HTML &amp&semi; CSS &amp&semi; JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  4. HTML &amp&semi; CSS &amp&semi; 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&plus;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. 在Asp&period;net 4&period;0 中动态注册HttpModule

    using System; using System.Web; using Microsoft.Web.Infrastructure; namespace MvcApplication1 { publ ...

  2. SQL Server 监控 使用sp&lowbar;trace&lowbar;create

    监控前言 上一节我们提到了MSSQL的基于SQL Event的监控,但是有些时候我们需要更加详细.适用于调优排错的监控.SQL Server内部运行的可见性是的查询调整.优化和综合排查成为可能!这一节 ...

  3. POJ1064

    #include <iostream> #include <iomanip> #include <cmath> using namespace std; int N ...

  4. tree命令

    tree命令以树状图列出目录的内容. 1.语法 tree(选项)(参数) 2.选项 -a:显示所有文件和目录: -A:使用ASNI绘图字符显示树状图而非以ASCII字符组合: -C:在文件和目录清单加 ...

  5. c&num; 柱状图（转载）

    // c# 显示柱状图 using System; using System.Data; using System.Configuration; using System.Web; using Sys ...

  6. TLD算法概述--学习理解之（一）

    liuyihai@126.com http://www.cnblogs.com/liuyihai/ TLD(Tracking-Learning-Detection)是英国萨里大学的一个捷克籍博士生Zd ...

  7. JS&lowbar;单个或多个文件上传&lowbar;不支持单独修改

    A-From表单直接填写提交地址,不过干预: 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/form-data",for ...

  8. 关于如何实现Android透明状态栏的总结

    开门见山. 原来做的效果,如下图(顶部有一条明显的橙色状态栏):   a1.gif 改过之后(顶部状态栏是透明的):   p2.gif 我发现网上写的一些文章,不够简洁明了,我整理了一下,复制粘贴一下 ...

  9. perl常用总结

    1. #!usr/bin/perl use warnings; use strict; use Getopt::Long; use File::Basename; use PerIO::gzip;   ...

  10. 【亲测有效】运行docker ps 出现Got permission denied问题的解决方案

    问题描述 今天在运行 docker ps 命令的时候出现如下问题: Got permission denied while trying to connect to the Docker daemon ...