使用DOM完成订单的添加、修改及删除操作

最新推荐文章于 2023-08-31 09:55:22 发布

wangyin233

最新推荐文章于 2023-08-31 09:55:22 发布

阅读量7.5k

点赞数 18

分类专栏：前端

本文链接：https://blog.csdn.net/wangyin233/article/details/103177281

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

初始界面

在这里插入图片描述点击“增加订单”按钮时，可增加一行订单信息。
点击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“修改”按钮变为“确定”按钮。

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/jscript" src="js/new_file.js" ></script>
	</head>
	<body>
		
		<table id="table-1" border="1" width="600px" height="100px" align="center" cellspacing="0px">
			<tbody id="info">
				<tr align="center">
					<th>商品名称</th>
					<th>数量</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
			</tbody>
			
			<tr align="center">

			</tr>
			<tr align="center">
				<td colspan="4">
					<input type="button" value="增加订单" onclick="add()"/>
				</td>
			</tr>
			
		</table>
		
		
		<div id="inputbox" class="box">    
			
			名称:<input id="s1" type="text" />
			<br>
			数量:<input id="s2" type="text" />
			<br>
			价格:<input id="s3" type="text" />
			<br>
			<input style="width: 200px" type="button" value="确定" onclick="aadd()" />
		</div>
		
		<style>                  
			.box{
				width:50%; 
				margin-top:10%; 
				margin:auto; 
				padding:28px;
				height:350px; 
				border:1px #111 solid;
				display:none;    //初始状态为隐藏，点击”增加订单“按钮后才会显示
				text-align:center;
				vertical-align:middle;
			}
			.box.show{
				display:block;
			} 
			
			.box input{
				width:80%; 
				font-size:18px;
				margin-top:18px;
			}
			 #s1,#s2,#s3{
                 width: 200px;
			}
		</style>
	</body>
</html>

js代码

var count = 0;
var counttd = 100;
var countbt = 1000;
var flag = 0;
var a = 0;

function add() {
    document.getElementById("inputbox").style.display = 'block';
}

function aadd() {
    var s1 = document.getElementById("s1").value;
    var s2 = document.getElementById("s2").value;
    var s3 = document.getElementById("s3").value;
    document.getElementById("inputbox").style.display = 'none';
    var tr = document.getElementById("info");
    tr.innerHTML += "<tr id='" + count + "' align='center'>" + "<td>" + s1 + "</td>" + "<td id='" + counttd + "'>" + s2 + "</td>" + "<td>" + s3 + "</td>" + '<td><input type="button" value="删除" οnclick="delet(' + count + ')" />&nbsp<input id="' + countbt + '"  type="button" value="修改" οnclick="change(' + counttd + ',' + countbt + ')" /></td>' + "</tr>";
    count++;
    counttd++;
    countbt++;
    flag = 0; //让flagc重新等于0 否则会一直累加 下面flag==0//==1就无法判断
}

function delet(count) {
    var row = document.getElementById(count);
    row.remove(count);                                    //删除id为count的行数据
}

function change(counttd, countbt) {//传递两个参数，counttd是点击修改后将td变为input，countbt是点击修改后将button的value改为确定


    if (flag == 0) {
        var td = document.getElementById(counttd);
        td.innerText = null;                       //将td的内容变为空
        var input = document.createElement("input"); //第一次点击修改时，在td里增加一个input
        input.id = a;                               //给input一个id
        td.appendChild(input);                      //将input添加到td节点下
        var bt = document.getElementById(countbt);
        bt.value = "确定";                           //将修改按钮改为确定
    }
    if (flag == 1) {                            //第二次点击修改按钮
        var a = document.getElementById(a);    //或缺增加的input的id
        a.style.display = 'none';                //使input隐藏
        var td = document.getElementById(counttd); //获取要修改的td的id
        td.innerText = a.value;                 //将input中输入的value赋给td
        var bt = document.getElementById(countbt); //获取button的id
        bt.value = "修改";                       //将确定按钮改为修改

    }

    flag++;    //按一次修改按钮就+1


}

DOM是文档对象模型，DOM给我们描绘了一个层次化的大树，主要分为四个大部分（document、element、attribute、text），每一个节点都是一个对象，有自己的属性和自己能使用的方法。

wangyin233

关注

18
点赞
踩
73

收藏

觉得还不错? 一键收藏
9
评论
使用DOM完成订单的添加、修改及删除操作

这里写自定义目录标题初始界面如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入初始界面点击“增加订单”按钮时，可增加一行订单信息。点击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“...
复制链接

扫一扫