JavaScript 动态网页实例 —— 表格处理

最新推荐文章于 2024-06-08 09:44:34 发布

迎风海盗旗

最新推荐文章于 2024-06-08 09:44:34 发布

阅读量898

点赞数 38

分类专栏：前端 JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cccloveforever/article/details/138597557

版权

表格是网页设计中必不可少的内容之一。本章首先介绍HTML中普通表格的组成结构，然后，在此基础上，介绍如何使用JavaScript设置表格的属性。随后，更具体地介绍操作表格元素的一般方法，主要是对表格行、列的动态增删操作。有了这些基础，在本章的最后介绍对表元的操作，即如何动态修改表格单元格中的内容。

HTML中的表格

本节给出一段HTML中的表格的示例代码，几乎用到了HTML表格的各种常见属性本节代码并不涉及JavaScript代码，但对于后面几节的深入介绍是有帮助的。

要点

本节代码主要使用了HTML中的表格的相关属性，主要功能和用法如下。

在 HTML 中，表格是用<table>标签定义的。表格被划分为行(使用<tr>标签)，每行又被划分为数据单元格(使用<td>标签)。td 表示“表格数据”(TableData)，即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等。
如果不指定 border 属性，表格将不显示边框。但多数情况下需要显示边框。想要显示一个有边框的表格，需要使用 border 属性。例如，前面的代码中使用<table border-"1">定义表格的边框为1。
在显示表格时，有时需要显示表格头，表格头使用<th>标签指定。
在表格中可以使用 cellpadding 属性,用于定义表格内容和边框之间的留空，也可以使用 cellspacing 属性增加单元格间距。
可以使用 align 属性设置单元格的对齐方式，让表格更美观一些。还可以使用 fiame 属性定义表格边框的显示方式。
为了使表格显示更美观，可以为表格添加背景色或背景图，分别使用bgcolor 和background属性实现。另外，还可以分别为某个单元格添加背景色或背景图。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 表格</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#ffc0c0">
<center><h2>HTML 表格</h2></center><hr>
<!--表格开始-->
<table border="1" frame="box" rules="groups" id="testTable" bordercolor="green" cellspacing="5" cellpadding="5">
<!--标题-->
<caption>总表头：测试用表</caption>
<thead><!--表头-->
<tr>
<th>表体一表头一</th>
<th>表体一表头二</th>
<th>表体一表头三</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot bgcolor="orange">
<tr>
<th colspan="3">这是一个HTML4格式的表格！</th>
</tr>
</tfoot>
<tbody bgcolor="yellow"> <!--表体之一-->
<tr>
<!--表体一的头部-->
<th colspan="3" align="center">表体一的头部信息</th>
</tr>
<tr>
<td>表元111</td>
<td>表元112</td>
<td>表元113</td>
</tr>
<tr>
<td>表元121</td>
<td>表元122</td>
<td>表元123</td>
</tr>
<tr>
<td>表元131</td>
<td>表元132</td>
<td>表元133</td>
</tr>
</tbody>
<tbody bgcolor="green"><!--表体之二-->
<tr>
<!--表体二的头部-->
<th colspan="3" align="center">表体二的头部信息</th>
</tr>
<tr>
<td>表元211</td>
<td>表元212</td>
<td>表元213</td>
</tr>
<tr>
<td>表元221</td>
<td>表元222</td>
<td>表元223</td>
</tr>
</tbody>
</table>
</body>
</html>

分析

(1)程序首先使用<table></table>定义了一个表格，并为其设置了border、fiame、rules、id、bordercolor、cellspacing 和 cellpadding 等属性。
(2)表格的主体部分，共包含5部分内容。第1部分为<caption>，表示表格的总标题;第2部分为<thead>，表示表格的表题;第3部分为<tf0ot>，表示表格的脚注;第4部分和第5 部分为<tbody>，表示表格的主体内容。
(3)<thead>部分为1行3列;<tfo

最低0.47元/天解锁文章

迎风海盗旗

关注

38
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 动态网页实例 —— 表格处理

表格是网页设计中必不可少的内容之一。本章首先介绍HTML中普通表格的组成结构，然后，在此基础上，介绍如何使用JavaScript设置表格的属性。随后，更具体地介绍操作表格元素的一般方法，主要是对表格行、列的动态增删操作。有了这些基础，在本章的最后介绍对表元的操作，即如何动态修改表格单元格中的内容。
复制链接

扫一扫