DOM和js实现删除结点，增加结点，和设置文本内容可修改（点击删除订单后，应该少一行tr）

本文链接：https://blog.csdn.net/qq_56715530/article/details/121344973

本文详细介绍了DOM和BOM在网页开发中的应用，通过实例展示了如何使用JavaScript操作HTML文档结构和浏览器对象，包括添加、删除订单项，以及元素修改和事件处理。

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

DOM和BOM分别是文档对象模型和浏览器对象模型，可以看作是一个对象，里面包含有一些方法和属性，以便于更方便操作文档对象和浏览器对象，前者主要有增删改，后者主要有跳向莫一网址或者获取网址具体信息以及其他许多操作……（自己对于这两个东西的小总结吧）

学艺不精，欢迎指正，下面直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单增加删除操作</title>
		<style type="text/css">
			table{
				margin-left: 500px;
				border-spacing: 0;
				text-align: center;
				
			}
			th,td{
				border: 1px solid #000000;
				padding-left: 20px;
				padding-right: 20px;
			}
			#tr1{
				height: 35px;
			}
		</style>
		<script type="text/javascript">
			function addOrder(){
				var tbody=document.getElementsByTagName("tbody");
				var tr=document.createElement("tr");
				var td1=document.createElement("td");
				var td2=document.createElement("td");
				var td3=document.createElement("td");
				var td4=document.createElement("td");
				td1.innerHTML="抗疲劳神奇钛项圈";
				td2.innerHTML="2";
				td3.innerHTML="￥49.00";
				td4.innerHTML="<button type='button' onclick='del()'>删除</button>&ensp;<button type='button' onclick='modify(this)'>修改</button>";
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tbody[0].appendChild(tr);
			}
			function del(){
				var tbody=document.getElementsByTagName("tbody");
				tbody[0].removeChild(event.target.parentNode.parentNode);
			}
			//下面是设置文本可以修改，当然使用contenteditable属性值为true也是可以达到的，但是这样没有输入框出现
			function modify(e){
				var tr = e.parentNode.parentNode;
				var td = tr.getElementsByTagName("td");
				td[1].innerHTML="<input type='text' style='width: 40px;' value=0 />";
				assure(e);
			}
			function assure(e){
				var tr = e.parentNode.parentNode;
				var td = tr.getElementsByTagName("td");
				e.parentNode.innerHTML="<button type='button' onclick='del()'>删除</button>&ensp;<button type='button' onclick='TextReplace(this)' >确定</button>";
			}
			function TextReplace(e){
				var tr = e.parentNode.parentNode;
				var td = tr.getElementsByTagName("td");
				td[1].innerHTML=td[1].childNodes[0].value;
				e.parentNode.innerHTML="<button type='button' onclick='del()'>删除</button>&ensp;<button type='button' onclick='modify(this)'>修改</button>";
			}
		</script>
	</head>
	<body>
		<table>
			<tbody id="tb1">
				<tr>
					<th>商品名称</th><th>数量</th><th>价格</th><th>操作</th>
				</tr>
				<tr>
					<td>防滑真皮休闲鞋</td><td>12</td><td>￥568.50</td>
					<td id="td1"><button type="button" onclick="del()">删除</button>&ensp;<button type="button" onclick="modify(this)" >修改</button></td>
				</tr>
				<tfoot>
					<tr id="tr1" ><td colspan="4"><button type="button" onclick="addOrder()" >增加订单</button> </td></tr>
				</tfoot>
			</tbody>
		</table>
	</body>
</html>