使用Selector API实现购物车客户端计算DOM学习第一天

最新推荐文章于 2024-04-26 19:04:51 发布

weixin_46711427

最新推荐文章于 2024-04-26 19:04:51 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/weixin_46711427/article/details/107869515

版权

<!DOCTYPE HTML>
<html>
<head>
<title>使用Selector API实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
	table{width:600px; text-align:center;
		border-collapse:collapse;
	}
	td,th{border:1px solid black}
	td[colspan="3"]{text-align:right;}
</style>

</head>
<body>
	<table id="data">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>iPhone6</td>
				<td>¥4488.00</td>
        <td>
          <button>-</button>
          <span>1</span>
          <button>+</button>
        </td>
				<td>¥4488.00</td>
			</tr>
			<tr>
				<td>iPhone6 plus</td>
				<td>¥5288.00</td>
				<td>
          <button>-</button>
          <span>1</span>
          <button>+</button>
				</td>
				<td>¥5288.00</td>
			</tr>
			<tr>
				<td>iPad Air 2</td>
				<td>¥4288.00</td>
        <td>
          <button>-</button>
          <span>1</span>
          <button>+</button>
        </td>
				<td>¥4288.00</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">Total: </td>
				<td>¥14064.00</td>
			</tr>
		</tfoot>
	</table>
  <script>
		//1.点击+/-号，修改数量
		//DOM4步：
		//1.1查找触发事件的元素：
		//1.1.1先查找table
		var table = document.getElementById('data');
		//1.1.2再查找table下所有的button
		var btns = document.getElementsByTagName('button');
		//1.2为触发事件的元素绑定事件处理函数
		//一边遍历，一边为每个按钮绑定事件处理函数
		for(var btn of btns){
			btn.onclick = function(){
        //问题3:点哪个按钮，让当前按钮的内容变成“花”
        // this.innerHTML = '花';
        //1.3查找要修改的元素
        //本例中查找当前按钮的爹的第二个孩子
        var span = this.parentElement.children[1];
        //测试：点哪个按钮，就让这个按钮旁边的span字体变为红色
				//span.style.color='red';
				//相当于手写<span style='color:red'>
        //1.4修改元素：
        //1.4.1先取出span的内容，因为接下来要做算数计算，保险起见必须转数字
        var n = parseInt(span.innerHTML);
        //按值传递！变量n中收到的只是页面上span内容的副本
        //所以在程序中该n，页面上span的内容是不会变的
        //1.4.2对n做加减
        //如果当前按钮的内容为+
        if(this.innerHTML == '+'){
          n++;
        }else if(this.innerHTML == '-'){
          n--;
        }
        span.innerHTML = n;

        //功能2：数量改变，同时修改小计
        //2.3：查找要修改的元素
        //本例中要修改当前按钮的爹的下一个兄弟：
        var subTd = this.parentElement.nextElementSibling;
        //2.4：修改元素内容3步
        //2.4.1:不用取值，而是直接计算出新小计，覆盖旧值即可
        //2.4.2：用单价*数量=小计！
        //数量n,前一步已经算过了！
        //单击price，暂时没有，需要获得当前按钮的爹的前一个兄弟td的内容，去掉￥，转为小数
        var price = parseFloat(
          this.parentElement  //当前td
          .previousElementSibling//下一个td
          .innerHTML  //下一个td的内容'￥4488.00'
          .slice(1)  //不要'￥'，截取4488.00
        );
        var sub = price*n;
				//2.4.3将小计放入小计格的内容中
        subTd.innerHTML = `￥${sub.toFixed(2)}`;

				//功能3：小计变化 ，计算总计：
				//3.3：先查找table下tfoot中最后一个td
				//选择器：tfoot td:last-child
				//因为只找一个元素，所以不加All
        var totalTd = table.querySelector('tfoot td:last-child');
        //测试代码：
				// totalTd.style.backgroundColor = 'yellow';
				//3.4：获得每行最后一个格子中的小计，累加计算出总计，放入总计td中，3步
				//3.4.1:旧的总计不需要，所以不需要取出旧的总计
				//3.4.2:累加计算出总计
				//3.4.2.1：查找到tbody中每行最后一个td
				//选择器：tbody td:last-child
				//因为会找到我多个，所以加All
        var tds = table.querySelectorAll('tbody td:last-child');
        var tota1 =0;
				//3.4.2.2：遍历找到的每个td
        for(var td of tds){
					//每遍历一个td就将td的内容累计到变量total中
          tota1 += parseFloat(td.innerHTML.slice(1)) ;
        }
				//3.4.3:将累加出的总价放入总价格的内容中
        totalTd.innerHTML = `￥${tota1.toFixed(2)}`;
			}
		}
	</script>
</body>
</html>

weixin_46711427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Selector API实现购物车客户端计算DOM学习第一天

<!DOCTYPEHTML><html><head><title>使用SelectorAPI实现购物车客户端计算</title><metacharset="utf-8"/><style>table{width:600px;text-align:center;border-collapse:collapse;}td,th{border:1pxsolidbla...
复制链接

扫一扫