JavaScript高级程序设计 学习笔记之DOM基础(四)

最新推荐文章于 2024-03-09 13:07:10 发布
原创 最新推荐文章于 2024-03-09 13:07:10 发布 · 144 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #JSP #HTML #ViewUI

本文演示了如何使用HTMLDOM方法创建表格，包括创建表格元素、设置样式、添加行和列以及插入文本。

7、使用核心DOM方法创建表格

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <script type="text/javascript">

            function createTable(){

                var oTable=document.createElement("table");//创建表格元素

                oTable.setAttribute("border", "1");//设置border属性为1

                oTable.setAttribute("width", "100%");//设置width属性为100%

 

                var oTBody=document.createElement("tbody"); //创建tbody元素

                oTable.appendChild(oTBody);//添加tbody到oTable中

 

                var oTr1=document.createElement("tr");

                oTBody.appendChild(oTr1);

                var oTD11=document.createElement("td");

                oTD11.appendChild(document.createTextNode("一行一列"));

                oTr1.appendChild(oTD11);

                var oTD12=document.createElement("td");

                oTD12.appendChild(document.createTextNode("一行二列"));

                oTr1.appendChild(oTD12);

 

                var oTr2=document.createElement("tr");

                oTBody.appendChild(oTr2);

                var oTD21=document.createElement("td");

                oTD21.appendChild(document.createTextNode("二行一列"));

                oTr2.appendChild(oTD21);

                var oTD22=document.createElement("td");

                oTD22.appendChild(document.createTextNode("二行二列"));

                oTr2.appendChild(oTD22);

 

                document.body.appendChild(oTable);//将表格添加到body中显示

 

            }

        </script>

    </head>

    <body  onload="createTable()">

    </body>

</html>

显示效果如下：

采用HTML DOM创建表格，运用一些特性和方法：

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <script type="text/javascript">

            function createTable(){

                var oTable=document.createElement("table");//创建表格元素

                oTable.setAttribute("border", "1");//设置border属性为1

                oTable.setAttribute("width", "100%");//设置width属性为100%

 

                var oTBody=document.createElement("tbody"); //创建tbody元素

                oTable.appendChild(oTBody);//添加tbody到oTable中

                //创建第一行

                oTBody.insertRow(0);//插入一个新行，为第一行

                oTBody.rows[0].insertCell(0);//在该新行上插入第一个单元格

                oTBody.rows[0].cells[0].appendChild(document.createTextNode("第一行第一列"));//在第一个单元格里添加文本内容

                oTBody.rows[0].insertCell(1);//在该行上插入第二个单元格

                oTBody.rows[0].cells[1].appendChild(document.createTextNode("第一行第二列"));//第二个单元格里添加文本

                //创建第二行

                oTBody.insertRow(1);//插入第二行

                oTBody.rows[1].insertCell(0);//插入第二行第一个单元格

                oTBody.rows[1].cells[0].appendChild(document.createTextNode("第二行第一列"));//添加文本到第一个单元格

                oTBody.rows[1].insertCell(1);//插入第二行第二个单元格

                oTBody.rows[1].cells[1].appendChild(document.createTextNode("第二行第二列"));//添加文本到第二个单元格

                document.body.appendChild(oTable);//将表格添加到body中显示

          

            }

        </script>

    </head>

    <body  onload="createTable()">

    </body>

</html>

 

 

 

JavaScript 高级程序设计 笔记
梦在前方，路在脚下，自胜者强，自强者胜！
02-06 761
第一章 什么是 JavaScript JavaScript 的组成：ECMAScript、文档对象模型（DOM）、浏览器对象模型（BOM） 文档对象模型（DOM）：一个应用编程接口（API），提供与网页内容交互的方法与接口。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点，包含不同的数据。 <html lang="en"> <head> <title>Sample</title>
JavaScript高级程序设计 学习笔记之DOM基础(五)
05-27
这篇学习笔记主要围绕DOM基础展开，涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中，DOM被视为一个树形结构，其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面： 1. *...
JavaScript高级程序设计（红宝书）学习笔记
m0_63882057的博客
03-09 1834
（：介绍了一些很宏观大概的与JS相关的内容，浮光掠影地过了一遍，对JS的定义和大概版本兼容组成有了一些认识。JavaScript是一种专为网页交互设计的脚本语言，由下列三种不同部分组成：①ECMAScript，提供核心语言功能②文档对象模型（DOM），提供访问和操作网页内容的方法和接口③浏览器对象模型（BOM），提供与浏览器交互的方法和接口。
JavaScript高级程序设计学习总结（笔记）
how2js的博客
11-23 1145
第一章 JavaScript简介 JavaScript实现组成： ECMAScript（核心） DOM（文档对象模型） BOM（浏览器对象模型） 第二章 在HTML中使用script 可以添加defer关键字延迟执行，在文档被加载并完全解析后，类似与DOMContentLoaded事件但是在DOMContentLoaded事件之前，多个defer脚本是按顺序调用的. 可以添加async关键字...
《JavaScript高级程序设计》学习笔记 JavaScript基本（1）
volit的博客
07-15 1149
ECMAScript的语法很大程度借鉴了C语言和其他类C语言，如Java和Perl。
JavaScript高级程序设计学习笔记【第一章 什么是JavaScript】
luminous-烁的博客
06-22 321
JavaScript是一门用来与网页交互的脚本语言，是前端学习必学的一种语言。从今天开始打卡学习，加油！
JavaScript高级程序设计学习笔记----初识JavaScript
m0_71673753的博客
09-15 1327
概括了一些JS入门基础知识和扩展知识
JavaScript高级程序设计系列一之DOM&BOM
FYSGXFZ的博客
11-21 673
简短介绍 本人是学习后端的，刚毕业来到公司，有幸能够跟着郑大的老师做项目。是他为我打开了语言的另一扇大门，同时使我能够先接触JS，然后还能有机会接触JAVA。由于目前接触JS比较多，加之本人也想深入掌握JS的一些原理，就在csdn上面整理一下思路，同时深入剖析一些JS的核心知识吧。 且行且学习，目前(2020.11.19)在使用Vue，昨天刚结束一个周期二十多天的权限管理系统前端，对Vue也算入了门，但是这哪儿行啊，Vue内部报错了基本上依赖网络(度娘)，哼哼哼，准备以Vue为切入点，深入理解JS核心知
JavaScript高级程序设计学习笔记（一）1.2JavaScript实现
weixin_42583106的博客
09-28 123
1.2.1. 一个完整的JavaScript实现由以下三部分组成：ECMAScript.BOM.DOM 2.ECMAScipt-262定义的ECMAScript只是这门语言的基础 ECMASCript-262规定的内容： 语法 类型 语句 关键字 保留字 操作符 对象 Web浏览器是可能实现ECMASCript的宿主环境之一 ----宿主环境不仅提供语言的基本实现，同时也会提供语言拓展（如DOM）...
JavaScript高级程序设计读书笔记
qq_45968958的博客
12-01 281
学习目标： JavaScript高级程序设计 学习内容： 什么是JavaScript JavaScript是一门用来与网页交互的脚本语言，包含以下三个组成部分。 1.ECMAScript：由ECMA-262定义并提供核心功能。 2.文档对象模型（DOM）：提供与网页内容交互的方法和接口。 3.浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。 HTML中的JavaScrip script元素 1.在网页中嵌入JavaScript代码 <script> function sayHi
JavaScript高级程序设计（第3版）学习笔记 第1章
Kedi的博客
12-10 231
第1章 JavaScript简介 1.一个完整的JavaScript实现也应该由下列三个不同的部分组成： 核心（ECMAScript）：提供核心语言功能 文档对象模型（DOM）：提供访问和操作网页内容的方法和接口 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口 2.ECMA（European Computer Manufacturers Association,欧洲计算机制造商协会...
JavaScript高级程序设计 DOM学习笔记
12-10
第十章 DOM DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。 1. 节点层次 1) 文档节点：document，每个文档的根节点。 2) 文档元素：即<html>元素，文档...
JavaScript高级程序设计学习笔记（一）
01-08
最近为了补js的基础，开坑javascript高程，这书基础部分写得很详细很好读，搭配着MDN进行学习理解。 闲下来的时间记录一下边读边做的笔记，大多是以前编程的时候没注意过的基础知识点。 第一章 JavaScript的完整实现...
JavaScript高级程序设计 事件学习笔记
12-10
第12章 事件 1.事件流 1.1事件冒泡（IE事件流） □事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不... 1.3DOM事件流 □“DOM2级事件”规定的
jmeter DSL 2.0支持压力测试和接口测试
12-04
jmeter DSL 2.0支持压力测试和接口测试
【Egg.js 管理系统】后台全功能 + MySQL 适配 + 直接部署 + 高下载！亲测可用！.zip
12-04
【Egg.js 管理系统】后台全功能 + MySQL 适配 + 直接部署 + 高下载！亲测可用！.zip
【轴承故障诊断】基于融合鱼鹰和柯西变异的麻雀优化算法OCSSA-VMD-CNN-BILSTM轴承诊断研究【西储大学数据】（Matlab代码实现）
12-04
内容概要：本文提出了一种基于融合鱼鹰算法和柯西变异的改进麻雀优化算法（OCSSA），用于优化变分模态分解（VMD）的参数，进而结合卷积神经网络（CNN）与双向长短期记忆网络（BiLSTM）构建OCSSA-VMD-CNN-BILSTM模型，实现对轴承故障的高【轴承故障诊断】基于融合鱼鹰和柯西变异的麻雀优化算法OCSSA-VMD-CNN-BILSTM轴承诊断研究【西储大学数据】（Matlab代码实现）精度诊断。研究采用西储大学公开的轴承故障数据集进行实验验证，通过优化VMD的模态数和惩罚因子，有效提升了信号分解的准确性与稳定性，随后利用CNN提取故障特征，BiLSTM捕捉时间序列的深层依赖关系，最终实现故障类型的智能识别。该方法在提升故障诊断精度与鲁棒性方面表现出优越性能。; 适合人群：具备一定信号处理、机器学习基础，从事机械故障诊断、智能运维、工业大数据分析等相关领域的研究生、科研人员及工程技术人员。; 使用场景及目标：①解决传统VMD参数依赖人工经验选取的问题，实现参数自适应优化；②提升复杂工况下滚动轴承早期故障的识别准确率；③为智能制造与预测性维护提供可靠的技术支持。; 阅读建议：建议读者结合Matlab代码实现过程，深入理解OCSSA优化机制、VMD信号分解流程以及CNN-BiLSTM网络架构的设计逻辑，重点关注参数优化与故障分类的联动关系，并可通过更换数据集进一步验证模型泛化能力。
这是一个基于Vuejs框架构建的现代化前端尺寸测量与响应式设计辅助工具项目_它专注于提供精准的网页元素尺寸测量视口分析CSS像素计算设备模拟与响应式断点调试功能_旨在帮助前.zip
最新发布
12-04
这是一个基于Vuejs框架构建的现代化前端尺寸测量与响应式设计辅助工具项目_它专注于提供精准的网页元素尺寸测量视口分析CSS像素计算设备模拟与响应式断点调试功能_旨在帮助前.zip
基于VSCode跨平台开发环境的Boost多线程库实践项目_通过mutex互斥锁与condition条件变量实现多线程同步控制_创建两个独立运行的读线程与两个并行执行的写线程_确.zip
12-04
基于VSCode跨平台开发环境的Boost多线程库实践项目_通过mutex互斥锁与condition条件变量实现多线程同步控制_创建两个独立运行的读线程与两个并行执行的写线程_确.zip
JavaScript高级程序设计（第3版）学习笔记与术语解析
"这篇学习笔记主要基于《JavaScript高级程序设计（第3版）》一书，旨在系统梳理JavaScript的基础知识，记录作者在学习和工作中遇到的精彩用法，分享给需要帮助的人。笔记涵盖JavaScript的起源、相关术语，如ECMA、TC...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值