HTML DOM TableHeader 对象

TableHeader 对象

TableHeader 对象表示一个 HTML <th> 元素。

访问 TableHeader 对象

您可以使用 getElementById() 来访问 <th> 元素：

var x=document.getElementById("myTh");

提示：您也可以通过搜索表单的 cells 集合来访问 TableHeader 对象。

创建 TableHeader 对象

您可以使用 document.createElement() 方法来创建 <th> 元素：

var x=document.createElement("TH");

TableHeader 对象属性

属性	描述
abbr	设置或返回 abbr 属性的值。
align	HTML5 中不支持。使用 style.textAlign 替代。设置或返回数据单元格中内容的水平对齐方式。
axis	HTML5 中不支持。设置或返回一个用逗号分隔的相关数据单元格的列表。
background	HTML5 中不支持。使用 style.background 替代。设置或返回数据单元格的背景图像。
bgColor	HTML5 中不支持。使用 style.backgroundColor 替代。设置或返回表格的背景颜色。
ch	HTML5 中不支持。设置或返回数据单元格根据的对齐字符。
chOff	HTML5 中不支持。设置或返回 ch 属性的水平偏移。
colSpan	设置或返回 colspan 属性的值。
headers	设置或返回 headers 属性的值。
height	HTML5 中不支持。使用 style.height 替代。设置或返回数据单元格的高度。
noWrap	HTML5 中不支持。使用 style.whiteSpace 替代。设置或返回单元格中的内容是否折行。
rowSpan	设置或返回 rowspan 属性的值。
vAlign	HTML5 中不支持。使用 style.verticalAlign 替代。设置或返回单元格中内容的垂直对齐方式。
width	HTML5 中不支持。使用 style.width 替代。设置或返回数据单元格的宽度。

标准属性和事件

TableHeader 对象同样支持标准属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

们继续往下讲述，关于a标签的跳转，我们用到的是href属性，href里面对应的就是我们需要跳转的地址，可以是本地文件的跳转，也可以是网络地址的跳转，这个很简单了，就不过多做赘述了。

大家有没有发现，在上述的例子中，我们点击a标签后，跳转的页面都是在当前窗口打开的，在实际的开发中，如果说在新的窗口打开呢？那么我就需要a标签的另一个属性“target”，target这个属性,可以使得我们选择在当前页面或者新窗口进行打开，默认不写或者target=“_self”，是当前窗口，target=“_blank”，是在新的窗口打开。

我们举个例子：

目录结构

目前，零基础这个文件夹里，有两个文件，“a标签.html”这个文件里的代码如下：

代码展示

跳转地址为同目录的“远程图片加载.html”文件，target属性为_blank，在新的窗口打开，我们看下效果：

点击

点击后，打开新的窗口进行展示：

新窗口打开

上边的例子，大家可以实际操作一下。

之前说过，a标签，不仅仅可以是文字，也可以是图片，比如我们给上边的“远程图片加载.html”这个文件里的图片，加上超链接，让它跳转到百度，代码如下：

代码

效果如下：

效果

点击图片后，跳转到了百度

跳转到百度

简单吧，所以啊，老铁们，网页制作啊，没什么好难的，轻轻松松都能学会。

3、表格标签，table，tr，td

表格，对于我们来说，司空见惯，课程表啊，人员信息表啊，这些Excel我们经常用，那么如何在网页上来表示表格呢？这就不得不提到table系列标签。

table表示一个表格，每一行由tr来表示，每一列由td来表示，举个很简单的例子，1行1列，代码如下：

代码

大家可以看到，代码这里，为了大家能够直观，很清晰地看到，我自己做了格式化，这里大家作为了一个了解就可以了，因为从第三天开始，我们就要鸟枪换炮，采用IDE进行开发，那简直就是如虎添翼，开发起来，嗖嗖的，我们拭目以待。

好，我们看下代码实现的效果，右键点击打开方式为浏览器：

what？什么鬼？这就是表格，开玩笑的吧，没开玩笑老铁，这确确实实，就是上述代码运行的效果，为什么和我们平常的表格不一样，那是因为没有添加属性啊，来，上才艺，加上边框，border，我们再来看下效果：

更改代码如下：

上面的代码，我们加上了表格的边框，宽度为1，单位默认是像素，可带可不带，运行效果如下：

有的朋友看到上面的效果，可能就有疑问了，为什么会有两个边框呢？这是由于table标签自带的内外边距所导致呢，如何去掉呢，很简单，使用

cellpadding和cellspacing属性就可以搞定，代码如下：

效果如下：

这里对两个属性，做一个解释，cellpadding,指的是单元格内容与其边框之间的空白，我们来看个对比：

不设置cellpadding

代码：

效果：

设置cellpadding为10：

代码：

效果：

是不是很清晰地看到了，表格中的内容距离边框明显远了，这就是cellpadding的作用。

我们再来看cellspacing，它指的是单元格之间的距离，我们看下对比：

不设置cellspacing：

代码：

效果：

设置cellspacing为10：

代码：

效果：

cellpadding和cellspacing属性，大家不要搞混淆了，一个是内容到边框的距离，一个单元格之间的距离。

来吧，实战练习一下，下面这个表格呢，是我用画图工具画的，对得不是很齐，将就着看哈，对于下面的表格，我们该如何实现呢？

首先呢，先分析，这个是很有必要的，即便以后，我们学有所成，做任何东西之前，也尽量要先分析，后写代码，通过上图，我们可以看到，有有5行3列，那么对应的tr，也就是行，就会有5个，每个tr里，有4列，也就是有4个td，ok，我们直接上代码：

代码有点多，其实都是重复的，莫害怕，不截图了，直接代码块，大家尽量自己写，千万别复制啊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
</head>
<body>
 
<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td>姓名</td>
		<td>年龄</td>
		<td>性别</td>
		<td>籍贯</td>
	</tr>
	<tr>
		<td>小赵</td>
		<td>12</td>
		<td>男</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>小王</td>
		<td>23</td>
		<td>女</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>老李</td>
		<td>36</td>
		<td>男</td>
		<td>郑州</td>
	</tr>
	<tr>
		<td>老王</td>
		<td>68</td>
		<td>男</td>
		<td>广州</td>
	</tr>
</table>
 
</body>
</html>

效果如下图：

虽然效果出来了，但是，是不是感觉很小啊，怎么解决？老铁们，前边我们是不是讲过图片是如何控制大小的，通过宽width和高height这两个属性是吧，同样的，这两个属性，也可以用于表格，我们不妨给当前表格设置，宽为500，高为300。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
</head>
<body>
 
<table border="1" cellpadding="0" cellspacing="0" width="500" height="300">
	<tr>
		<td>姓名</td>
		<td>年龄</td>
		<td>性别</td>
		<td>籍贯</td>
	</tr>
	<tr>
		<td>小赵</td>
		<td>12</td>
		<td>男</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>小王</td>
		<td>23</td>
		<td>女</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>老李</td>
		<td>36</td>
		<td>男</td>
		<td>郑州</td>
	</tr>
	<tr>
		<td>老王</td>
		<td>68</td>
		<td>男</td>
		<td>广州</td>
	</tr>
</table>
 
</body>
</html>

效果如下：

效果明显好转了是吧，但是，问题来了，文字没有居中，怎么搞？如果我们以后学了css样式后，其实特别简单，这里就先不扩展css的东西，还是先研究html，一点一点来，按部就班。文字居中，就需要用到align属性，它有三个值，left，center，right，很明显就是，左，中，右；来，我们设置居中：

这里呢，我们需要给每一个td，去添加这个属性，这里我就不添加太多了，只给第一行添加了，大家练习的时候，可以都加上，我们看下效果：

因为，我只给第一行添加了居中，所以呈现出的效果就如上图。

对于表格的练习，大家多练习练习，没什么难的，分析好几行几列后，就用tr和td写出来；上边的表格，还差一个标题，标题如何去写呢，之前已经学过了h系列标签，还有p标签，这两个都可以使用，这里我们再学一个局限于表格的标题标签，caption，我们直接上代码：

还是上边的例子啊，代码就不全粘贴了，这里只贴了部分代码：

效果如下：

基本上常规的表格，我们已经讲述完了，我们再来看看，不常规的。

看到上图，是一种什么感觉，是不是很直观地发现，有单元格的合并效果，这个在表格里面很常见，但在代码里该如何体现呢？首先我们先来了解下table的另两个属性，rowspan和colspan。

rowspan

跨行，也就是行与行之间合并，用法，rowspan=“2”，值为几，就是合并几行。

colspan

跨列，也就是列与列之间合并，用法，colspan=“2”，值为几，就是合并几列。

举个例子：

先看代码：

效果：

其实就是一个两行两列的代码，现在呢，我想要把1和2合并，也就是列与列之间合并，怎么合并，使用colspan属性呗，来，看代码：

效果展示：

有一点需要注意，你合并之后，一定要把多余的给去掉，大家可以看到，在代码中，第一行中，只有一个td标签，因为你要合并两个表格成为1个表格，所以，多余的要删除，合并3个，4个及多个，都是这样处理。

好，我们把代码还原，进行合并1和3,1和3是行之间的合并，进而要使用rowspan，代码如下：

效果如下：

注意：同样的，你合并时，也要记得，把多余的给删除，可以直接看代码，我的实现。

经过简单的练习后，那么我们直接实现刚开始的截图效果吧，就是如下图：

代码实现

效果如下：

这里为了表格展示好看，我用了width属性，具体大家可以看代码，好了，table表格相关的，基本上就结束了，也给大家举了很多例子，大家可以多写写，一定要掌握住哦。

4、文本格式化的使用

文本格式化，这个大家作为一个了解即可，所谓的文本格式，就是文本的样式，比如，加粗，斜体，大号字，小号字，插入字，删除字等。

我们找其中几个简单地展示一下，代码如下：

效果如下：

文本格式，大家作为一个了解，因为这些内容后期，大部分都被css所代替，不过大家能够掌握的话，也是一件好事，说个比较有意思的标签，就是pre，这个是预格式文本，也就说，它会保留你书写的格式。

比如代码如下：

效果：

5、总结及回顾

第二天的内容比较多，总共分为了三篇文章进行讲述，大家可以发现，基本上都是特别的详细，我可以这样说，这是目前网上关于网页制作教程中是最详细的，哈哈，有点飘了啊，之所以详细呢，就是为了照顾到零基础的朋友。

今天的总结回顾呢，两个掌握的知识点：

1、a标签的使用，本地和远程地址的跳转，新窗口的设置。

2、table标签的使用，掌握住tr，td，设置内外边距及单元格之间的合并。

今天的作业，就是把第二天当中所讲的内容，自己好好地敲上一遍，好了，就到这里吧，拜拜，我们第三天见。

文作者：HelloGitHub-kalifun

这是 HelloGitHub 推出的《讲解开源项目》系列，今天给大家推荐一个基于 Bootstrap 和 jQuery 的表格插件：Bootstrap-Table

一、介绍

从项目名称就可以知道，这是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端几乎在工作中都有涉及过，Bootstrap Table 提供了快速的建表、查询、分页、排序等一系列功能。

项目地址：https://github.com/wenzhixin/bootstrap-table

可能 Bootstrap 和 jQuery 技术有些过时了，但如果因为历史的技术选型或者旧的项目还在用这两个库的话，那这个项目一定会让你的嘴角慢慢上扬，拿下表格展示方面的需求易如反掌！

二、模式

Boostatrp Table 分为两种模式：客户端（client）模式、服务端（server）模式。

客户端：通过数据接口将服务器需要加载的数据一次性展现出来，然后装换成 json 然后生成 table。我们可以自己定义显示行数，分页等，此时就不再会向服务器发送请求了。
服务器：根据设定的每页记录数和当前显示页，发送数据到服务器进行查询。

三、实战操作

Tips： 解释说明均在代码中以注释方式展示，请大家注意阅读。

我们采用的是最简单的 CDN 引入方式，代码可直接运行。复制代码并将配置好 json 文件的路径即可看到效果。

3.1 快速上手

注释中的星号表示该参数必写，话不多说上代码。示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello, Bootstrap Table!</title>
 // 引入 css
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
 // 需要填充的表格
 <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
 window.operateEvents={
 // 当点击 class=delete 时触发
 'click .delete': function (e,value,row,index) {
 // 在 console 打印出整行数据
 console.log(row);
 }
 };

 $('#tb_departments').bootstrapTable({
 url: '/frontend/bootstrap-table/user.json', //请求后台的 URL（*）
 method: 'get', //请求方式（*）
 // data: data, //当不使用上面的后台请求时，使用data来接收数据
 toolbar: '#toolbar', //工具按钮用哪个容器
 striped: true, //是否显示行间隔色
 cache: false, //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
 pagination: true, //是否显示分页（*）
 sortable: false, //是否启用排序
 sortOrder: "asc", //排序方式
 sidePagination: "client", //分页方式：client 客户端分页，server 服务端分页（*）
 pageNumber:1, //初始化加载第一页，默认第一页
 pageSize: 6, //每页的记录行数（*）
 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
 search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
 strictSearch: true, //启用严格搜索。禁用比较检查。
 showColumns: true, //是否显示所有的列
 showRefresh: true, //是否显示刷新按钮
 minimumCountColumns: 2, //最少允许的列数
 clickToSelect: true, //是否启用点击选中行
 height: 500, //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
 uniqueId: "ID", //每一行的唯一标识，一般为主键列
 showToggle:true, //是否显示详细视图和列表视图的切换按钮
 cardView: false, //是否显示详细视图
 detailView: false, //是否显示父子表
 showExport: true, //是否显示导出
 exportDataType: "basic", //basic', 'all', 'selected'.
 columns: [{
 checkbox: true //复选框标题，就是我们看到可以通过复选框选择整行。
 }, {
 field: 'id', title: 'ID' //我们取json中id的值，并将表头title设置为ID
 }, {
 field: 'username', title: '用户名' //我们取 json 中 username 的值，并将表头 title 设置为用户名
 },{
 field: 'sex', title: '性别' //我们取 json 中 sex 的值，并将表头 title 设置为性别
 },{
 field: 'city', title: '城市' //我们取 json 中 city 的值，并将表头 title 设置为城市
 },{
 field: 'sign', title: '签名' //我们取 json 中 sign 的值，并将表头 title 设置为签名
 },{
 field: 'classify', title: '分类' //我们取 json 中 classify 的值，并将表头 title 设置为分类
 },{
 //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
 // events 触发事件
 field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
 var del='<button type="button" class="btn btn-danger delete">删除</button>'
 return del;
 }
 }
 ],
 responseHandler: function (res) {
 return res.data //在加载远程数据之前，处理响应数据格式.
 // 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
 }
 });
</script>
</body>
</html>

上面的代码展示通过基本 API 实现基础的功能，示例代码并没有罗列所有的 API。该库还有很多好玩的功能等着大家去发现，正所谓师父领进门修行靠个人～

3.2 拆解讲解

下面对关键点进行阐述，为了更方便使用的小伙伴清楚插件的用法。

3.2.1 初始化部分

选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

3.2.2 阅读数据部分

columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]

field json 中键值对中的 Key
title 是表格头显示的内容
formatter 是一个函数类型，当我们对数据内容需要修改时会用它。例：编码转换

3.2.3 事件触发器

events:operateEvents
 window.operateEvents={
 'click .download': function (e,value,row,index) {
 console.log(row);
 }
 }

因为很多时候我们需要针对表格进行处理，所以事件触发器是一个不错的选择。比如：它可以记录我们的行数据，可以利用触发器进行定制函数的执行等。

四、扩展

介绍几个扩展可以让我们便捷的实现更多的表格功能，而不需要自己造轮子让我们的工作更加高效（也可以进入官网查看扩展的具体使用方法，官方已经收集了大量的扩展）。老规矩直接上代码：

4.1 表格导出

<script src="js/bootstrap-table-export.js"></script> 
showExport: true, //是否显示导出
exportDataType: basic,								 //导出数据类型，支持：'基本'，'全部'，'选中'
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型

4.2 自动刷新

<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true, 							 //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新
autoRefreshStatus: true,						//设置 true 为启用自动刷新。这是表加载时状态自动刷新
autoRefreshInterval: 60,						//每次发生自动刷新的时间（以秒为单位）
autoRefreshSilent: true							//设置为静默自动刷新

4.3 复制行

<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true,									//设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板
copyWithHidden: true,								//设置 true 为使用隐藏列进行复制
copyDelimiter: ', ',								//复制时，此分隔符将插入列值之间
copyNewline: '\n'									//复制时，此换行符将插入行值之间

五、总结

本篇文章只是简单的阐述 Bootstrap-Table 如何使用，正在对表格功能实现而忧愁的小伙伴，可以使用 HelloGitHub 推荐的这款插件。你会发现网页制作表格还可以如此快捷，期待小伙伴挖掘出更加有意思的功能哦。

注：上面 js 部分并没有采用函数形式，建议在使用熟悉之后还是采用函数形式，这样也方便复用及让代码看起来更加规范。

参考资料

[1]《讲解开源项目》: https://github.com/HelloGitHub-Team/Article

[2]Bootstrap-Table 项目地址: https://github.com/wenzhixin/bootstrap-table

[3]Bootstrap-Table 官方文档: https://bootstrap-table.com/docs/getting-started/introduction/

『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们，让更多人爱上开源、贡献开源～

在线咨询

上一篇：2018 年，UX 设计有哪些好用的工具？
下一篇：php学习笔记php中htmlspecialchar

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML DOM TableHeader 对象

您的项目需求