js如何使用DOM,什么是DOM，使用DOM操作表格，增删改查

最新推荐文章于 2024-05-16 16:52:30 发布
最新推荐文章于 2024-05-16 16:52:30 发布
阅读量775 收藏 8
点赞数 4
CC 4.0 BY-SA版权
文章标签： javascript 前端 html html5 css 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cocoo0711/article/details/132590478
本文介绍了DOM操作，它是对文档对象模型进行增删改查的过程，可动态改变页面结构和样式。还阐述了表格中常见的DOM操作，如创建表格、添加删除行列、修改内容属性、遍历表格、修改样式及排序等，并给出简单实例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

什么是DOM操作？

DOM操作是指对文档对象模型（Document Object Model，简称DOM）进行增删改查等操作的过程。DOM是一种表示和操作HTML、XML等文档的标准编程接口，它将文档解析为一个由节点和对象（包含属性和方法）组成的集合，开发者可以通过DOM提供的接口来访问和操作文档的各个部分，包括元素、属性、文本等。常见的DOM操作包括通过选择器选取元素、添加/删除元素、修改元素的属性和内容等。通过DOM操作，开发者可以动态地改变页面的结构和样式，实现与用户的交互。

表格中常见的DOM操作有哪些？

  1. 创建表格：通过document.createElement()方法创建table元素，并使用appendChild()方法将其添加到文档中。

  2. 添加和删除行、列：使用insertRow()方法添加新的行，使用deleteRow()方法删除指定的行；使用insertCell()方法添加新的单元格，使用deleteCell()方法删除指定的单元格。

  3. 修改表格内容：通过访问表格中的行和单元格元素，来修改其内容，例如使用innerHTML或innerText属性来设置行内文本或HTML内容。

  4. 获取和修改表格的属性：使用getAttribute()方法获取表格的属性值，使用setAttribute()方法设置表格的属性值，例如设置表格的边框样式、宽度等。

  5. 遍历表格：使用for循环和表格的rows属性来遍历表格的所有行，使用for循环和行的cells属性来遍历每一行的所有单元格。

  6. 修改单元格样式：通过访问单元格元素的style属性，可以设置单元格的样式，如背景颜色、字体颜色、边框等。

  7. 表格排序：实现表格的排序功能，可以通过比较单元格中的内容，并使用insertBefore()方法重新排列行的顺序。

    以下是一个简单的DOM操作表格实例，希望对你有帮助！

  8. <body>
		<p><input type="button" value="修改表头" onclick="nvat()"></p>
		<table border="1" cellspacing="0" cellpadding="8" width="560px" style="text-align: center;" id="bgt">
			<tr id="row1">
				<th>名称系列</th>
				<th>性别</th>
				<th>联系电话</th>
				<th>编辑</th>
			</tr>
			<tr id="row2">
				<td>刘xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row2')">&nbsp;<input type="button" value="修改"onclick="revise('row2')"></td>
			</tr>
			<tr id="row3">
				<td>曹xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row3')">&nbsp;<input type="button" value="修改"onclick="revise('row3')"></td>
			</tr>
			<tr id="row4">
				<td>岑xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row4')">&nbsp;<input type="button" value="修改"onclick="revise('row4')"></td>
			</tr>
			<tr id="row5">
				<td>李xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row5')">&nbsp;<input type="button" value="修改"onclick="revise('row5')"></td>
			</tr>
			<tr id="row6">
				<td>周xx</td>
				<td>男</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row6')">&nbsp;<input type="button" value="修改"onclick="revise('row6')"></td>
			</tr>
		</table>
		<div class="sr">
			<ul>
				<li>姓名：<input type="text" id="name" style="width: 80px;"> &nbsp;</li>
				<li>性别：<select id="sex">
						<option value="男">男</option>
						<option value="女">女</option>
						<option value="未知">未知</option>
					</select>&nbsp;
				</li>
				<li>电话：<input type="text" name="Name" id="house" style="width: 146px;">&nbsp; </li>
				<li><button onclick="adro()">添加学员信息</button></li>
			</ul>
		</div>
	</body>

    <style type="text/css">
			ul,
			li {
				list-style: none;
				padding: 0px;
				margin: 0px;
			}

			.sr ul {
				display: flex;
				margin-top: 12px;
			}
		</style>
    <script>
		function nvat(){//修改表头
			var navs = document.getElementById("row1")
				navs.setAttribute("style", "background:#3b3b8b;color:coral")
			}
		function deletes(tid){//删除
			var row = document.getElementById(tid)
			row.parentNode.removeChild(row)
		}
			function revise(id){//修改
				var td = document.getElementById(id).cells; //获取所有要修改的单元格对象
					var name = td[0].innerHTML; //获取姓名
					var house = td[2].innerHTML; //获取电话
					td[0].innerHTML = "<input size='2' value='" + name + "'>";
					td[2].innerHTML = "<input size='9' value='" + house + "'>";
					var sex = td[1]
						.innerHTML; //获取性别
					if (sex.trim() == "男") {
						td[1].innerHTML = '<input type="radio" name="se' + id + '" checked>男' + '<input type="radio" name="se' + id +
							'">女'
					} else if (sex.trim() == "女") {
						td[1].innerHTML = '<input type="radio" name="se' + id + '" >男' + '<input type="radio" name="se' + id +
							'" checked>女'
					}
					td[3].lastElementChild.value = "确定";
					td[3].lastElementChild.setAttribute("onclick", "def('" + id + "')")
				}
				//确定
				function def(id) {
					var td = document.getElementById(id).cells; //获取所有要修改的单元格对象
					var name = td[0].lastElementChild.value; //获取用户输入的姓名
					var house = td[2].lastElementChild.value; //获取用户输入的电话
					td[0].innerHTML = name;
					td[2].innerHTML = house;
					var sex = td[1].getElementsByTagName("input"); //获取单元格中所有的单选按钮 
					for (var i = 0; i < sex.length; i++) {
						if (sex[i].checked) {
							td[1].innerHTML = "男"
						} else {
							td[1].innerHTML = "女"
						}
					}
					td[3].lastElementChild.value = "修改";
					td[3].lastElementChild.setAttribute("onclick", "revise('" + id + "')")//要与上面的函数反复运用
				}
			var index = 7
			function adro(){//添加
				var rid ="row"+(index++)
				//输入用户信息
				var name = document.getElementById("name").value
				var sex = document.getElementById("sex").value
				var house = document.getElementById("house").value
				//创建4个td节点和一个tr节点
				var td1 = document.createElement("td")
				td1.innerHTML = name
				var td2 = document.createElement("td")
				td2.innerHTML = sex
				var td3 = document.createElement("td")
				td3.innerHTML = house
				var td4 = document.createElement("td")
				td4.innerHTML = '<input type="button" value="删除" onclick="deletes(\'' + rid +'\')">&nbsp;<input type="button" value="修改"onclick="revise(\'' + rid +'\')">'
				
				var tr = document.createElement("tr")
				tr.setAttribute("id",rid)
				tr.appendChild(td1)
				tr.appendChild(td2)
				tr.appendChild(td3)
				tr.appendChild(td4)
				
			document.getElementById("bgt").lastChild.appendChild(tr)
			}
			
	</script>

    实例完全代码
     

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,
			li {
				list-style: none;
				padding: 0px;
				margin: 0px;
			}

			.sr ul {
				display: flex;
				margin-top: 12px;
			}
		</style>
	</head>
	<body>
		<p><input type="button" value="修改表头" onclick="nvat()"></p>
		<table border="1" cellspacing="0" cellpadding="8" width="560px" style="text-align: center;" id="bgt">
			<tr id="row1">
				<th>亚洲男神系列</th>
				<th>性别</th>
				<th>联系电话</th>
				<th>编辑</th>
			</tr>
			<tr id="row2">
				<td>刘xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row2')">&nbsp;<input type="button" value="修改"onclick="revise('row2')"></td>
			</tr>
			<tr id="row3">
				<td>曹xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row3')">&nbsp;<input type="button" value="修改"onclick="revise('row3')"></td>
			</tr>
			<tr id="row4">
				<td>岑xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row4')">&nbsp;<input type="button" value="修改"onclick="revise('row4')"></td>
			</tr>
			<tr id="row5">
				<td>李xx</td>
				<td>女</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row5')">&nbsp;<input type="button" value="修改"onclick="revise('row5')"></td>
			</tr>
			<tr id="row6">
				<td>周xx</td>
				<td>男</td>
				<td>123456789</td>
				<td><input type="button" value="删除" onclick="deletes('row6')">&nbsp;<input type="button" value="修改"onclick="revise('row6')"></td>
			</tr>
		</table>
		<div class="sr">
			<ul>
				<li>姓名：<input type="text" id="name" style="width: 80px;"> &nbsp;</li>
				<li>性别：<select id="sex">
						<option value="男">男</option>
						<option value="女">女</option>
						<option value="未知">未知</option>
					</select>&nbsp;
				</li>
				<li>电话：<input type="text" name="Name" id="house" style="width: 146px;">&nbsp; </li>
				<li><button onclick="adro()">添加学员信息</button></li>
			</ul>
		</div>
	</body>
	<script>
		function nvat(){//修改表头
			var navs = document.getElementById("row1")
				navs.setAttribute("style", "background:#3b3b8b;color:coral")
			}
		function deletes(tid){//删除
			var row = document.getElementById(tid)
			row.parentNode.removeChild(row)
		}
			function revise(id){//修改
				var td = document.getElementById(id).cells; //获取所有要修改的单元格对象
					var name = td[0].innerHTML; //获取姓名
					var house = td[2].innerHTML; //获取电话
					td[0].innerHTML = "<input size='2' value='" + name + "'>";
					td[2].innerHTML = "<input size='9' value='" + house + "'>";
					var sex = td[1]
						.innerHTML; //获取性别
					if (sex.trim() == "男") {
						td[1].innerHTML = '<input type="radio" name="se' + id + '" checked>男' + '<input type="radio" name="se' + id +
							'">女'
					} else if (sex.trim() == "女") {
						td[1].innerHTML = '<input type="radio" name="se' + id + '" >男' + '<input type="radio" name="se' + id +
							'" checked>女'
					}
					td[3].lastElementChild.value = "确定";
					td[3].lastElementChild.setAttribute("onclick", "def('" + id + "')")
				}
				//确定
				function def(id) {
					var td = document.getElementById(id).cells; //获取所有要修改的单元格对象
					var name = td[0].lastElementChild.value; //获取用户输入的姓名
					var house = td[2].lastElementChild.value; //获取用户输入的电话
					td[0].innerHTML = name;
					td[2].innerHTML = house;
					var sex = td[1].getElementsByTagName("input"); //获取单元格中所有的单选按钮 
					for (var i = 0; i < sex.length; i++) {
						if (sex[i].checked) {
							td[1].innerHTML = "男"
						} else {
							td[1].innerHTML = "女"
						}
					}
					td[3].lastElementChild.value = "修改";
					td[3].lastElementChild.setAttribute("onclick", "revise('" + id + "')")//要与上面的函数反复运用
				}
			var index = 7
			function adro(){//添加
				var rid ="row"+(index++)
				//输入用户信息
				var name = document.getElementById("name").value
				var sex = document.getElementById("sex").value
				var house = document.getElementById("house").value
				//创建4个td节点和一个tr节点
				var td1 = document.createElement("td")
				td1.innerHTML = name
				var td2 = document.createElement("td")
				td2.innerHTML = sex
				var td3 = document.createElement("td")
				td3.innerHTML = house
				var td4 = document.createElement("td")
				td4.innerHTML = '<input type="button" value="删除" onclick="deletes(\'' + rid +'\')">&nbsp;<input type="button" value="修改"onclick="revise(\'' + rid +'\')">'
				
				var tr = document.createElement("tr")
				tr.setAttribute("id",rid)
				tr.appendChild(td1)
				tr.appendChild(td2)
				tr.appendChild(td3)
				tr.appendChild(td4)
				
			document.getElementById("bgt").lastChild.appendChild(tr)
			}
			
	</script>
</html>

js实现表格的增 删 改 查
m0_46639176的博客
09-26 2456
效果图在最下面哦 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <ti...
Javascript 1 - 实现表格单元格dom增删改查
weixin_43734992的博客
04-19 1540
以下内容参考自青岛思途java讲师臧老师 要求 1。生成指定行数和列数的表格。 2。按从左往右，从上往下的顺序给单元格着色，着色按照“赤、橙、黄、绿、青、蓝、紫”的顺序循环。 3。表格显示横向斑马线、纵向斑马线。 4。鼠标滑过，所在行变色。按住Ctrl键时，鼠标滑过，所在列变色。 5。鼠标单击，所在行被选中并高亮，按住Ctrl键时，鼠标单击，所在列被选中并高亮。 6。在选中的行前、后添加一行（或指定的行数）。在选中的列前、后添加一列（或指定的列数）。 7。删除选中行。 8。对单元格进行编号，选中行向上、向
js实现表格的增删改查
weixin_30378623的博客
12-10 470
说在前面的，写给小白白的，大神请绕道~ 今天用原生js写一下动态表格的增删改查，主要是熟悉一下js的DOM操作。 首先，做一个表格，用来显示提交的数据，如图下： 此处，我添加了编号、姓名、密码、生日、地址五个属性，另外加选中、操作两个操作，亲们可以自行添加，布局代码如下： <table class="table table-hover table-bordered"...
[基础学习]JS实现表格的增删改查
坤坤的博客
03-31 524
主题 <main> <h4>Js 面向对象 动态添加标签页</h4> <div class="tabsbox" id="tab"> <!-- tab 标签 --> <nav class="fisrstnav"> <ul> <li class="liactive">
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
jQuery对table表格进行增删改查
10-20
以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行（tr）和单元格（td）。首先，我们需要创建一个表单让用户输入新数据，然后通过点击“新增”按钮...
BootStrap实现带有增删改查功能的表格(DEMO详解)
09-01
在本文中，我们将探讨如何使用BootStrap实现一个具有增删改查功能的表格。BootStrap是一个流行的前端开发框架，它提供了一套简洁且响应式的组件，使得网页设计和开发变得更加高效。在表格的实现上，BootStrap默认的...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
在这个项目中，jQuery被用来增强用户界面的交互性，如表格数据的动态加载、增删改查操作的异步提交等。 5. **Bootstrap**：Bootstrap是Twitter开源的一个前端框架，提供了一套响应式布局、移动设备优先的Web开发...
js实现对表格的增删查改
04-14
使用js实现对表格的增删查改
js对表格数据的增删改
04-04
NULL 博文链接：https://rain-08.iteye.com/blog/1421852
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
JS一个表的增删改查
11-05
JavaScript 一张表的增删改查，使用ajax，压缩包自带数据库文件
jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
热门推荐
杨明金的博客
11-12 22万+
查看本章节 查看作业目录 需求说明： 在 jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作 点击“增加”超链接时，将表格中的第一条数据添加到表格的末尾 在输入框中输入 ID 号，点击“查询”超链接，表格将过滤出指定 ID 号的数据 点击每行对应的“删除”超链接，将删除对应行的数据 点击每行对应的“修改”超链接，ID、姓名和薪水变为可编辑状态，“修改”超链接变为“保存”，点击“保存”超链接，修改后的数据将被保存并显示 实现思路： 在页面中添加”增加”超链接、文本
原生js操作table表格增删改查操作汇总
最新发布
随手记的笔记
05-16 1970
【代码】原生js操作table表格增删改查操作汇总。
JavaScript实现DOM增删改查
Hern（宋兆恒）
06-28 547
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">...
JavaScript对表格增删改查
柚咖小窝
02-01 9064
  先用一个简单的表格来练练手。 添加数据
js-dom增删改查
weixin_47295886的博客
10-24 233
—————在前面插入节点：父节点.insertBefore(需要在前面的元素,在后面的元素);document.createElement("li")========创建元素节点 会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。li.appendChild(text)---------//添加关系——————设置子节点添加到父节点下--bj.parentNode——获取父节点parentNode=====子节点.parentNode。//添加关系——————设置子节点。
js DOM实现增删改查
苏墨
03-15 623
文章目录什么是DOM文档对象模型节点：Node——构成HTML文档最基本的单元。DOM查询获取元素节点 通过document对象调用获取元素节点的子节点获取父节点和兄弟节点DOM 操作内联样式通过JS修改元素的样式：DOM 实现增删改 什么是DOM ​ DOM，全称Document Object Model文档对象模型。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值