dom节点操作

最新推荐文章于 2021-12-20 10:25:46 发布

时光浅流

最新推荐文章于 2021-12-20 10:25:46 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/weixin_43308670/article/details/90511266

版权

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.div {
			width: 1000px;
			height: 50px;
			margin: 0 auto;
			border: 1px solid #555555;
		}

		ul {
			display: flex;
			justify-content: space-between;
		}

		li {
			text-align: center;
			line-height: 50px;
			width: 250px;
			height: 50px;
			border: 1px solid #555555;
		}
		#add {
			width: 100px;
			height: 30px;
			margin: 10px auto;
		}

		.top {
			margin-top: 100px;
			background: #cccccc;
		}

		input {
			width: 240px;
			height: 40px;
			border: 0;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="top div">
			<ul>
				<li>商品名称</li>
				<li>数量</li>
				<li>价格</li>
				<li>操作</li>
			</ul>
		</div>
		<div class="div">
			<ul>
				<li>玫瑰保湿睡眠面膜</li>
				<li>5</li>
				<li>48</li>
				<li><button type="button" class="remove" onclick="remove(this)">删除</button>
					<button type="button" class="change" onclick="change(this)">修改</button></li>
			</ul>
		</div>
	</div>
	<div class="div">
		<ul>
			<button type="button" id="add">增加订单</button>
		</ul>
	</div>
	<script type="text/javascript">
		var oParent;
		var i;

		function $id(id) {
			return document.getElementById(id); //利用id名获取节点
		}

		function $cl(cl) {
			return document.getElementsByClassName(cl);//利用class名获取节点
		}

		function $create(cr) {
			return document.createElement(cr);   //创建一个新的元素节点
		}

		function remove(that) {
			that.parentNode.parentNode.parentNode.remove();  //删除节点
		}
		$id("add").onclick = function() {    //增加节点
			i++;
			$id("box").innerHTML +=        //在父节点中插入节点样式
				`<div class="div">
			<ul>
				<li>玫瑰保湿睡眠面膜</li>
				<li>5</li>
				<li>48</li>
				<li><button type="button" class="remove" onclick="remove(this)">删除</button>
					<button type="button" class="change" onclick="change(this)">修改</button></li>
			</ul>
		</div>`;
		}

		function change(that) {                  //修改节点
			oParent = that.parentNode.parentNode.parentNode;
			var name = oParent.children[0].children[0].innerText;
			var number = oParent.children[0].children[1].innerText;
			var price = oParent.children[0].children[2].innerText;
			oParent.innerHTML =            //将原值传入修改页面
				`<ul>        
			<li><input type="text" name="" id="names" value="${name}" /></li>
			<li><input type="text" name="" id="numbers" value="${number}" /></li>
			<li><input type="text" name="" id="prices" value="${price}" /></li>
			<li><button type="button" id="confirm" onclick="confirm(this)">确定</button>	</li>
		</ul>`;
		}

		function confirm(that) {    //修改节点中的确认
			oParent.innerHTML =        //将修改后的值传入原节点
				`<ul>
			<li>${$id("names").value}</li>
			<li>${$id("numbers").value}</li>
			<li>${$id("prices").value}</li>
			<li><button type="button" class="remove" onclick="remove(this)">删除</button>
			<button type="button" class="change" onclick="change(this)">修改</button></li>
		</ul>`;
		}
	</script>
</body>

时光浅流

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
dom节点操作

<style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .div { width: 1000px; height: 50px; margin: 0 auto; border: 1px solid #555555; } ul { ...
复制链接

扫一扫