动态创建与操作：JavaScript实现HTML table的增删行
版权申诉
168 浏览量
更新于2024-08-22
收藏 64KB PDF 举报
本文档主要介绍了如何利用JavaScript进行节点操作，特别是在动态创建HTML表格（table）时的行插入、删除以及元素的创建。节点操作在Web开发中起着关键作用，它基于W3C的HTML DOM（Document Object Model）标准，允许开发者对网页内容进行动态修改。
首先，我们了解什么是节点。在HTML文档中，所有内容都是节点，包括文档节点、元素节点（如`<div>`或`<p>`）、文本节点、属性节点和注释节点。通过DOM API，开发者可以遍历、选择和操作这些节点。
文档中提到的`insertBefore()`方法是DOM操作的一个重要函数，用于在已存在的子节点（`existingnode`）之前插入新节点（`newnode`）。这对于动态添加内容到DOM树非常有用，例如在用户交互时动态生成表格行。
关于元素的创建，文中列举了三种常见的方式：
1. `document.write()`: 这种方法直接将HTML代码写入文档流，但存在局限性，只能向`<body>`元素添加元素，且不支持复杂结构的构建。
2. `innerHTML`: 可以通过获取元素的`innerHTML`属性并设置新内容来动态添加元素，但这种方法有其缺点，如果在同一个元素内多次使用，会替换所有内容，不支持并存多个元素。
3. `document.createElement()`: 这是推荐的创建元素方式，通过调用`createElement()`方法创建新的元素节点，然后可以使用`appendChild()`方法将其添加到父元素中。例如，创建一个`<p>`元素并将其添加到指定的`div`元素末尾：
```javascript
var pObj = document.createElement("p");
divObj1.appendChild(pObj);
```
接下来，文档提供了一个实际的DOM操作动态创建表格的例子。通过监听按钮点击事件，当用户点击“点击创建表格”按钮时，代码会动态生成一个表格。在这个过程中，JavaScript数组`a`用于存储表格的数据，每一项包含表头和对应的链接。通过遍历数组，使用`createElement()`和`appendChild()`方法逐行创建表格，并插入到文档中。
总结来说，本文详细讲解了如何使用JavaScript的节点操作，特别是动态创建HTML表格，涉及了`insertBefore()`方法、不同元素创建方式的比较以及具体应用实例。这对于前端开发人员理解和实现动态网页功能至关重要。通过掌握这些技术，开发者能够灵活地根据用户输入或其他条件动态更新网页内容，提升用户体验。
节点操作节点操作
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点
总的来说只要是在窗口内的都是节点，都可以通过DOM操作
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。
创建元素的三种方式创建元素的三种方式
document.write()
弊端：只能往body中添加元素
document.write('<div class="box1">我是div</div>');
innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖
document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";
document.createElement()
父元素.appendChild(子元素)：给父元素末尾添加子元素
var pObj = document.createElement("p");
divObj1.appendChild(pObj);
dom节点的案例动态创建table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击创建表格</button>
</body>
</html>
<script>
//创建数组，准备数据
var a=[['百度','<a href="https://www.baidu.com/">百度</a>'],['掏包','<a href="https://www.taobao.com/">掏包</a>'],['并夕夕','<a href="https://youhui.pinduoduo.com/">并夕夕</a>']]
document.getElementById('btn').addEventListener('click',function(){
//创建table
table=document.createElement('table')
document.querySelector('body').appendChild(table)
for(var i=0;i<3;i++){//创建3个tr
tr=document.createElement('tr')//创建tr
for(var j=0;j<2;j++){
td=document.createElement('td')//创建td
td.style.border='1px red solid'//td样式
td.innerHTML=a[i][j]//访问数组a
tr.appendChild(td)//加到tr内
}
table.appendChild(tr)//tr加到table内
}
document.getElementById('btn').disabled=true//创建完成，按钮禁用
})
</script>
点击创建行，和删除行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr><td><button id="btn">添加</button></td></tr>
</table>
</body>
</html>
<script>
var i=0;
table=document.querySelector('table')
document.getElementById('btn').onclick=function(){//点击事件
tr=document.createElement('tr')//创建tr
for(var j=0;j<2;j++){
td=document.createElement('td')//创建td
td.style.border='1px red solid'
button=document.createElement('button')//创建按钮删除和他的方法
button.innerHTML='删除'
button.onclick=function(){
table.removeChild(this.parentElement.parentElement)
}
if(j==0){
td.innerHTML=i++//第一个格子内容i++
}
else{
td.appendChild(button)//第二个是按钮删除
}
tr.appendChild(td)//td见到tr内
}
table.appendChild(tr)//将内容加到table
}
</script>
节点操作节点操作
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点
总的来说只要是在窗口内的都是节点，都可以通过DOM操作
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
下载后可阅读完整内容，剩余3页未读，立即下载
2022-06-18 上传
2022-10-29 上传
2023-03-31 上传
2023-05-31 上传
2023-07-16 上传
2023-07-16 上传
2023-06-09 上传
2023-07-16 上传
2023-06-07 上传
一诺网络技术
- 粉丝: 0
- 资源: 2万+
我的内容管理
展开
最新资源
- WebLogic集群配置与管理实战指南
- AIX5.3上安装Weblogic 9.2详细步骤
- 面向对象编程模拟试题详解与解析
- Flex+FMS2.0中文教程：开发流媒体应用的实践指南
- PID调节深入解析：从入门到精通
- 数字水印技术：保护版权的新防线
- 8位数码管显示24小时制数字电子钟程序设计
- Mhdd免费版详细使用教程：硬盘检测与坏道屏蔽
- 操作系统期末复习指南：进程、线程与系统调用详解
- Cognos8性能优化指南：软件参数与报表设计调优
- Cognos8开发入门：从Transformer到ReportStudio
- Cisco 6509交换机配置全面指南
- C#入门：XML基础教程与实例解析
- Matlab振动分析详解：从单自由度到6自由度模型
- Eclipse JDT中的ASTParser详解与核心类介绍
- Java程序员必备资源网站大全
