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

news2025/1/12 4:10:19

        表格是网页设计中必不可少的内容之一。本章首先介绍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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1686440.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言 | Leetcode C语言题解之第108题将有序数组转换为二叉搜索树

题目&#xff1a; 题解&#xff1a; struct TreeNode* helper(int* nums, int left, int right) {if (left > right) {return NULL;}// 选择任意一个中间位置数字作为根节点int mid (left right rand() % 2) / 2;struct TreeNode* root (struct TreeNode*)malloc(sizeo…

生产制造边角料核算说明及ODOO演示

今天群里有伙伴提到边角料的处理问题&#xff0c;我们梳理了一下&#xff0c;在生产过程中&#xff0c;如果产生了边角料&#xff0c;核算产成品的投料成本时需要考虑边角料的价值&#xff0c;以确保成本核算的准确性。以下是注意的几点&#xff1a; 一、边角料的入账价值 在生…

poi操作word模板,对原有的word修改

/*** 化工园区调查表** param templatePath* param outPath* param parkInterview*/public static String getDocx(String templatePath, String outPath, ParkInterview parkInterview){File file new File(templatePath);File file1 new File(outPath);if(!file1.exists()…

初识C语言——第二十五天

函数的嵌套调用和链式访问 函数不可以嵌套定义&#xff0c;但可以嵌套调用 链式访问&#xff1a;把一个函数的返回值作为另外一个函数的参数 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>//写一个函数&#xff0c;每调用一次这个函数&#xff0c;就会 将num…

ArcGIS批量更改所有符号的格式

这期谈一下&#xff0c;如何修改所有符号的样式。 比如&#xff0c;我们需要更改下图的面符号位无轮廓的 该如何批量修改的呢&#xff1f; 视频教学吧&#xff1a; ArcGIS批量更改所有符号的格式 ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放-CSDN博客文章浏览阅…

OracleDG原理

一、DataGuard架构介绍 1、基本介绍 在DG环境中&#xff0c;至少会有两个数据库&#xff0c;一个数据库处于Open状态&#xff0c;对外提供服务&#xff0c;这个数据库叫做primary Database。第二个数据库处于恢复状态&#xff0c;叫做Standby Database。运行时Primay Databas…

C# 正则表达式使用小计

此文档用于记录平时使用正则表达式的心得&#xff0c;不定期更新 基础 实例 替换实例一 //这里匹配以 “( 开头,以 )” 结尾的字符串 private static Regex REGEX_ARG_CONTENT new Regex("""(.*?)""");//此方法用于在匹配到的结果前添加字符…

TG5032CGN TCXO 超高稳定10pin端子型适用于汽车动力转向控制器

TG5032CGN TCXO / VC-TCXO是一款应用广泛的晶振&#xff0c;具有超高稳定性&#xff0c;CMOS输出和使用晶体基振的削波正弦波输出形式。且有低相位噪声优势&#xff0c;是温补晶体振荡器(TCXO)和压控晶体振荡器(VCXO)结合的产物&#xff0c;具有TCXO和VCXO的共同优点&#xff0…

微网群如何协调控制?基于目标级联法的微网群多主体分布式优化调度程序代码!

前言 微电网将分布式电源(distributed generation&#xff0c;DG)与负荷组成有机整体&#xff0c;通过控制策略降低了分布式电源直接并网对大电网的影响&#xff0c;是分布式电源友好并网的有效手段。随着微电网的不断发展&#xff0c;局部范围内的多个微电网互相联结形成微网…

学习记录16-反电动势

一、反电动势公式 在负载下反电势和端电压的关系式为&#xff1a;&#x1d448;&#x1d43c;&#x1d445;&#x1d43f;*&#xff08;&#x1d451;&#x1d456; / &#x1d451;&#x1d461;&#xff09;&#x1d438; E为线圈电动势、 &#x1d713; 为磁链、f为频率、N…

大语言模型预训练新前沿:「最佳适配打包」重塑文档处理标准

源自&#xff1a;机器之心 “人工智能技术与咨询” 发布 声明:公众号转载的文章及图片出于非商业性的教育和科研目的供大家参考和探讨&#xff0c;并不意味着支持其观点或证实其内容的真实性。版权归原作者所有&#xff0c;如转载稿涉及版权等问题&#xff0c;请立即联系我们…

颠覆传统编码,零基础也能飞的工具!

YDUIbuilder以其低代码的设计理念&#xff0c;通过简单的拖拽操作&#xff0c;即使是编程新手也能快速构建出专业的用户界面。这不再是一个遥不可及的梦想&#xff0c;而是一个触手可及的现实。 组件化世界&#xff0c;创意无限&#xff1a;构建梦想中的界面 在YDUIbuilder的组…

java项目之人事系统源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的人事系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于vue的人事系统的主要使用者…

软件无线电学习-第二代移动通信系统过程理解

本文知识内容摘自《软件无线电原理和应用》 无线通信领域让大家感受最深的是民用移动通信的快速发展。民用移动通信在短短的二十年时间里已发展了三代&#xff1a;20世纪80年代的模拟体制(TACS/AMPS)为第一代移动通信(简称1G)&#xff1b;20世纪90年代的数字体制(GSMCDMATDMA)…

.NET快速实现网页数据抓取

网页数据抓取需求 本文我们以抓取博客园10天推荐排行榜第一页的文章标题、文章简介和文章地址为示例&#xff0c;并把抓取下来的数据保存到对应的txt文本中。 请求地址&#xff1a;https://www.cnblogs.com/aggsite/topdiggs 创建控制台应用 创建名为DotnetSpiderExercise的控…

呆马科技----构建智能可信的踏勘云平台

近年来&#xff0c;随着信息技术的快速发展&#xff0c;各个行业都在积极探索信息化的路径&#xff0c;以提升工作效率和服务质量。智慧踏勘云平台是基于区块链和大数据技术构建的全流程智慧可信踏勘解决平台。平台集远程视频、数据显示、工作调度、过程记录为一体&#xff0c;…

5.23 Linux中超时检测方式+模拟面试

1.IO多路复用的原理&#xff1f; IO多路复用使得一个或少量线程资源处理多个连接的IO事件的技术。对于要处理的多个阻塞的IO操作&#xff0c;建立集合并存储它们的文件描述符&#xff0c;利用单个阻塞函数去监控集合中文件描述符事件到达的情况&#xff0c;&#xff08;如果到…

MQTT物联网关

在物联网&#xff08;IoT&#xff09;日益融入我们生活与工作的今天&#xff0c;如何高效、安全地实现设备间的信息交换成为了行业的关键议题。MQTT&#xff0c;作为轻量级的发布/订阅消息传输协议&#xff0c;凭借其高效性、实时性和可扩展性&#xff0c;在物联网领域占据了举…

解决配置动态刷新注解@RefreshScope导致定时任务注解@Scheduled失效问题

示例 1. 获取配置bean 注意使用配置动态刷新注解RefreshScope. Data RefreshScope Component ConfigurationProperties(prefix "test") public class TestProperties {private String filesPath;private String directoryCleanCron; } 2. 实现定时任务的代码 注意…

Unreal基础多线程及渲染多线程

基础多线程&#xff1a; UE4中的多线程模型主要基于FRunnable和FRunnableThread两个核心概念。其中&#xff0c;FRunnable定义了一个可以在线程上运行的对象&#xff0c;而FRunnableThread则提供了一个平台无关的线程对象抽象&#xff0c;负责驱动FRunnable对象的初始化、执行…