网上订单是

最新推荐文章于 2024-10-12 06:14:00 发布

清蒸大闸蟹-

最新推荐文章于 2024-10-12 06:14:00 发布

阅读量90

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/m0_73749341/article/details/139151108

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
				width: 200px;
				height: 200px;
				margin: 0 auto;
			}
			
			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>

		</body>

</html>