js--增删改查

最新推荐文章于 2023-10-15 10:22:53 发布

我是一个被it搞的帅哥

最新推荐文章于 2023-10-15 10:22:53 发布

阅读量1.5k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_68804273/article/details/124178543

版权

这篇博客主要介绍了JavaScript如何实现订单的增删改查功能。通过insertRow()方法进行行的插入，编辑功能通过改变按钮的value值及对应的函数实现，删除则涉及对表格元素的操作。文中给出了具体的实现代码。

摘要由CSDN通过智能技术生成

订单的删除和增加与修改

虽然上个博客也写字了这个案例，这篇博客我们把他单独写一个博客放出来

首先要插入行要使用insertRow()插入行

实现思路和关键代码:

//使用集合rows和属性length计算当前表格中的行数
 var addTable=document.getElementById("order");
 var row_index=addTable.rows.length-1;//索引从0开始，所以总长度-1

//使用tableRow对象插入新行时，设置行id属性，方便后续删除
//插入ID号，产生效果为：<tr id=“row1”>，方便后续传递行号参数给删除函数delRow(rowId)
newRow.id="row"+row_index;

实现思路 :

“修改”按钮函数editRow()、 “确定”按钮函数upRow()，两个函数传递的参数都是当前行的id号
函数editRow()：使用lastChild访问最后一个单元格中的“修改”按钮，并改变value值为“确定”
函数upRow()：使用firstChild和value获取当前数量值，同样改变按钮上显示的文本和调用的函数

以下就是订单的删除和增加与修改的所有代码：

//首先写完HTML代码后先用css设置表格等样式
		<style type="text/css">
			body {
   
				font-size: 13px;
				line-height: 25px;
			}
			table {
   
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 400px;
			}
			td {
   
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
				text-align: center;
			}
			.title {
   
				font-weight: bold;
				background-color: #cccccc;
			}
			input text {
   
				width: 100px;
			}
		</style>
		<script type="text/javascript">
			//增加
			function addRow() {
   
				var sa = docu