<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*table样式*/
.content table {
border-collapse: collapse;
width: 600px;
}
.content table th, td {
min-width: 100px;
border: 1px solid grey;
text-align: center;
}
/*加减号的样式*/
.wrap {
width: 80px;
height: 27px;
margin: 0 auto;
}
.wrap span {
display: inline-block;
border: 1px solid #a0a0a0;
width: 25px;
height: 25px;
float: left;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.wrap .show-num {
cursor: default;
width: 25px;
height: 25px;
float: left;
border-style: none;
padding: 0;
text-align: center;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
.prices {
margin-top: 10px;
}
.btns {
margin-bottom: 10px;
}
/*背景颜色的类*/
.bgc {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<pre>
<s>0. 搞清楚代码</s>
<s>1. 选中变色</s>
<s>2. 逐个勾选到时候，勾选所有</s>
<s>3. 排序</s>
<s>4. (搜索)</s>
<s>5. 对数字直接进行修改</s>
<s>6. (计算选中商品价格)</s>
<s>7. 修改为事件委托</s>
1.添加
2.删除
3.修改
4.修改库存
5.勾选
6.排序
（7.操作数组）
</pre>
<div>
商品名称：<input type="text">
商品价格：<input type="text">
<br>
<br>
<button>添加商品</button>
<button>删除选中</button>
<button>价格排序</button>
<button>勾选总价</button>
</div>
<div>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>全选 <input type="checkbox"></th>
<th>修改库存</th>
<th>修改单价</th>
<th>删除商品</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div>
商品总价：<span>0</span>
商品均价：<span>0</span>
</div>
</body>
<script>
var rawStr = "可乐-3,雪碧-2.5,矿泉水-2,辣条-4";
var objArr = [];
buildItemsArray();
printTableInfo();
bindEvents();
//绑定所有的DOM事件
function bindEvents() {
checkAllEvent();
addItemEvent();
deleteItemEvent();
sortItemEvent();
computeSelectedEvent();
}
//checkbox全选的事件
function checkAllEvent() {
var checkAll = document.querySelector("#check-all");
checkAll.onclick = function () {
//获取表格中除表头外所有的tr中的checkbox
var checks = document.querySelectorAll(".item-check");
for (var i = 0; i < checks.length; i++) {
//为获取的每一个checkbox指定当前checkall的选中状态
checks[i].checked = this.checked;
var tr = checks[i].parentElement.parentElement;
//根据当前的checkall状态改变下列tr的背景颜色
if (this.checked) {
tr.style.backgroundColor = "#f1f1f1";
} else {
tr.style.backgroundColor = "white";
}
}
};
}