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>
- 大小: 8.6 KB
分享到：
相关推荐
这篇学习笔记主要围绕DOM基础展开，涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中，DOM被视为一个树形结构，其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面： 1. *...
这篇学习笔记将带你探索JavaScript的核心概念，包括变量、数据类型、控制流、函数、对象和类等，这些都是构建复杂应用程序的基础。 首先，我们要了解JavaScript的基础语法。在JavaScript中，变量是存储数据的容器，...
### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中，为了更好地组织页面内容并增强语义性，引入了一系列新的结构标签，这些标签不仅能够帮助开发者更清晰地定义页面的不同部分，同时也为搜索...
韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程，这些都是学习JavaScript时至关重要的知识点。 首先，基础语法是JavaScript学习的基石。包括变量声明（var、let、const）、数据类型（如...
这本“JavaScript高级程序设计第四版”的学习笔记涵盖了JavaScript的各个方面，旨在帮助学生、开发者以及对编程感兴趣的人深入理解这一强大的脚本语言。这份笔记是针对毕设、课设、项目实训等实践性学习场景编写的，...
以上只是JavaScript高级程序设计中的一部分内容，实际的学习笔记会更深入地探讨这些主题，包括异常处理、作用域链、闭包、异步编程（如回调函数、Promise、async/await）、模块系统（CommonJS、ES modules）、正则...
JavaScript程序设计的基础篇涵盖了编程语言的基本概念和基础知识，这些概念和知识是进一步学习JavaScript深入内容的前提和基础。了解和掌握这些知识点，对于前端开发工程师的学习和工作至关重要。随着前端技术的不断...
这份“JavaScript高级程序设计---笔记归类.pdf”文档显然详细整理了JavaScript的关键知识点，包括ECMAScript规范、DOM操作、数据类型、运算符、流程控制语句、函数以及面向对象编程等。 首先，ECMAScript是...
这份“JavaScript练习程序学习笔记”很可能包含了一系列的代码示例、学习心得和常见问题解答，旨在帮助学习者深入理解和掌握JavaScript编程。 在JavaScript的学习过程中，首先会接触到基础语法，包括变量声明（var...
根据给定的文件信息，以下是关于JavaScript中DOM（文档对象模型）的相关知识点详解： DOM是文档对象模型（Document Object Model）的缩写，它是一个跨平台的接口，由W3C组织制定标准，用于在HTML或XML文档中创建和...
### JavaScript权威指南学习笔记二：客户端JavaScript #### 第十二章：Web浏览器中的JavaScript ##### 一、Web浏览器环境 在客户端JavaScript中，浏览器提供了一个特定的执行环境，其中`window`对象扮演着至关...
JavaScript学习笔记讲解版参考.pdf是一份详尽的教程，涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始，引导读者理解网页样式的设置与应用。 1. CSS（Cascading Style Sheets）样式表是用于控制...
### JavaScript 学习笔记1：数组、DOM与BOM简要总结 #### 数组方法概述 在JavaScript中，数组是一种非常重要的数据结构，用于存储多个值。数组对象提供了多种方法来帮助我们操作数组中的元素。 - **pop()**：从...
网页程序设计是一门涵盖多个关键技术领域的综合学科，主要包括HTML（超文本标记语言...总的来说，这个压缩包提供了一个全面的网页程序设计学习路径，涵盖了从基础到高级的关键技术，适合希望进入网页开发领域的学习者。
在深入探讨JavaScript编程语言之前，...在《JavaScript高级程序设计》这本书中，作者深入探讨了这些概念，并提供了一系列实用的编程技巧和最佳实践，这对于任何希望深化JavaScript知识的开发者来说都是一份宝贵的资源。
JavaScript，作为使网页具备交互能力的程序设计语言，是DOM操作的核心。 动态HTML（DHTML）是HTML、CSS和JavaScript三者的结合，它允许开发者创建具有交互性和动态效果的网页。HTML负责标记网页内容，CSS则用来设置...
《JavaScript高级程序设计（第3版）》这本书是深入理解和掌握JavaScript的一本经典之作，它涵盖了从基础到高级的各种概念和技术。 首先，我们来了解一下JavaScript的背景。ECMA，全称欧洲计算机制造商协会，是制定...