JavaScript--增删改

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

萧磊y

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

阅读量1.2k

点赞数 1

文章标签： java javascript 前端

本文链接：https://blog.csdn.net/m0_63223374/article/details/124087073

版权

HTML表格 JavaScript 动态增删改事件处理前端开发

关键词由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 = document.getElementById("order"); //获取表格
				var sum = sa.rows.length - 1; //获取总行数，不包括最后按钮一行
				var sb = sa.insertRow(sum); //在表格最后位置插入一行
				sb.id = "row" + sum; //给插入的行取一个id
				
				var ca = sb.insertCell(0); //插入第0列
				ca.innerHTML = "<input type='text'>";
				var cb = sb.insertCell(1); //插入第0列
				cb.innerHTML = "<input type='text' style='width:20px'>";
				var cc = sb.insertCell(2); //插入第0列
				cc.innerHTML = "<input type='text' style='width:20px'>";
				var cd = sb.insertCell(3); //插入第0列
				cd.innerHTML = "<input type='button' value='删除' οnclick=\"delRow('" + sb.id +
					"')\"> <input type='button' value='确定' οnclick=\"qdRow('" + sb.id + "')\">";
			}
			//删除
			function delRow(rid) {
				var va = document.getElementById("order"); //根据id获取表格对象
				var sa = document.getElementById(rid); //根据id获取你要删除的行对象
				var index = sa.rowIndex; //根据sa找到该行对象对应的下标
				va.deleteRow(index); //开始删除行
			}
			//确定
			function qdRow(rid) {
				var sa = document.getElementById(rid); //根据id获取你要确定的行
				var sum = sa.cells; //获取该行所有列(文本框)的集合
				//alert(sum.length);
				//alert(sum[0].lastChild.value);
				var ca = sum[0].lastChild.value;
				sum[0].innerHTML = ca;
				var cb = sum[1].lastChild.value;
				sum[1].innerHTML = cb;
				var cc = sum[2].lastChild.value;
				sum[2].innerHTML = cc;

				sum[3].lastChild.value = "修改";
				sum[3].lastChild.setAttribute("onclick", "editRow('" + rid + "')");
			}
			//修改
			function editRow(rid) {
				var sa = document.getElementById(rid);
				var sum = sa.cells;

				var ca = sum[0].innerHTML;
				sum[0].innerHTML = "<input type='text' value='" + ca + "'>";
				var cb = sum[1].innerHTML;
				sum[1].innerHTML = "<input type='text' style='width:20px' value='" + cb + "'>";
				var cc = sum[2].innerHTML;
				sum[2].innerHTML = "<input type='text' style='width:20px' value='" + cc + "'>";

				sum[3].lastChild.value = '确定';
				sum[3].lastChild.setAttribute("onclick", "qdRow('" + rid + "')");
			}
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="order">
			<tr class="title">
				<td>商品名称</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr id="row1">
				<td>防滑真皮休闲鞋</td>
				<td>12</td>
				<td>&yen;568.50</td>
				<td><input name="rowdel" type="button" value="删除" onclick='delRow("row1")' />
					<input name="edit" type="button" value="修改" onclick='editRow("row1")' />
				</td>
			</tr>
			<tr>
				<td colspan="4" style="height:30px;">
					<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
				</td>
			</tr>
		</table>