<html>
<head>
<meta charset="utf-8">
<title>表格在线编辑求商品总价</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px
}
#box {
width: 500px;
margin: 100px auto
}
table,
th,
td {
border: 1px solid #000;
border-collapse: collapse
}
td,
th {
width: 100px;
height: 30px;
padding: 10px
}
input[type="text"] {
display: none;
height: 24px;
width: 60px;
border: 1px solid #ccc;
}
tbody tr td:first-child {
text-align: center;
}
tfoot td {
text-align: right;
}
.editBtn {
color: #666
}
.delBtn {
color: red
}
.okBtn,
.cancelBtn {
display: none
}
.edit span {
display: none
}
.edit input[type="text"] {
display: inline-block
}
.edit .editBtn,
.edit .delBtn {
display: none
}
.edit .okBtn,
.edit .cancelBtn {
display: inline
}
</style>
</head>
<body>
<div id="box">
<table>
<thead>
<tr>
<th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" /></td>
<td><span>张三</span><input type="text"></td>
<td><span>18</span><input type="text"></td>
<td><span>1</span><input type="text"></td>
<td>
<a href="javascript:;" class="editBtn">编辑</a>
<a href="javascript:;" class="okBtn">确定</a>
<a href="javascript:;" class="cancelBtn">取消</a>
<a href="javascript:;" class="delBtn">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="check" /></td>
<td><span>李四</span><input type="text"></td>
<td><span>25</span><input type="text"></td>
<td><span>2</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" /></td>
<td><span>小强</span><input type="text"></td>
<td><span>22</span><input type="text"></td>
<td><span>3</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="check" /></td>
<td><span>小明</span><input type="text"></td>
<td><span>16</span><input type="text"></td>
<td><span>4</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">总价：￥<b id="money"></b></td>
</tr>
</tfoot>
</table>
</div>
<script>
function on(ele, type, fn, isCapture) {
// 如果参数没有传，默认值为false
if (isCapture === undefined) isCapture = false;
if (ele.attachEvent) {
// IE
ele.attachEvent('on' + type, fn);
} else {
ele.addEventListener(type, fn, isCapture);
}
}
// 使用事件委托给tbody写事件
var oTbody = document.querySelector('tbody')
on(oTbody, 'click', function(e) {
e = e || window.event;
// 获取事件源
var target = e.target || e.srcElement;
var className = target.className;
var tr = target.parentNode.parentNode;
var spans = tr.querySelectorAll('span');
switch (className) {
case 'editBtn':
tr.className = 'edit';
// 从tr出发来找span，这样找到的只有当前行的span
for (var i = 0; i < spans.length; i++) {
// 找到当前span的下一个兄弟元素（input），将它的value赋值为当前span的innerHTML
spans[i].nextElementSibling.value = spans[i].innerHTML;
}
break;
case 'okBtn':
//当点击确定按钮时，移除'edit'即取消编辑状态
tr.classList.remove('edit');
for (var i = 0; i < spans.length; i++) {
// 找到当前span的下一个兄弟元素（input），将它的value赋值给当前span的innerHTML
spans[i].innerHTML = spans[i].nextElementSibling.value;
}
break;
case 'cancelBtn':
//当点击取消按钮时，移除'edit'即取消编辑状态
tr.classList.remove('edit');
for (var i = 0; i < spans.length; i++) {
//点击取消按钮时，编辑状态关闭，span的innerHTML值维持不变
spans[i].innerHTML = spans[i].innerHTML;
}
break;
case 'delBtn':
//点击删除按钮即删除一整行，先找到当前按钮的父节点再删除自身
var tr = target.parentNode;
tr.parentNode.remove(tr);
//删除一行后，checks.length长度减一
checks.length--;
//当checks.length为0时，全选按钮为未选中状态
if (checks.length === 0) {
allCheck.checked = false;
}
//实时更新总价
Allmoney.innerHTML -= tr.parentNode.children[2].children[0].innerHTML * tr.parentNode.children[3].children[0].innerHTML;
}
});
//全选框
var allCheck = document.querySelector("#allCheck");
//所有单选框
var checks = document.getElementsByClassName("check");
//商品总价格
var Allmoney = document.querySelector("#money");
//全选按钮事件
allCheck.onchange = function() {
price = 0;
for (var i = 0; i < checks.length; i++) {
//单选框与全选框同步状态
checks[i].checked = this.checked;
//变量n用来存储单选框选中的数量,全选按钮选中时,n等于checks.length即所有单选按钮全部选中
n = this.checked ? checks.length : 0;
var singlePrice = checks[i].checked ? checks[i].parentNode.parentNode.children[2].children[0].innerHTML : 0;
var quantity = checks[i].checked ? checks[i].parentNode.parentNode.children[3].children[0].innerHTML : 0;
price += singlePrice * quantity;
}
//全选按钮未选中时，价格为0
if (!this.checked) {
price = 0;
}
//商品价格显示
Allmoney.innerHTML = price;
};
//变量n用来存储单选框选中的数量
var n = 0;
//变量price用来存储商品总价格
var price = 0;
for (var i = 0; i < checks.length; i++) {
checks[i].onchange = function() {
this.checked ? n++ : n--;
if (n === checks.length) {
//当单选框选中数量等于单选框总数时即为全选中
allCheck.checked = true;
} else {
allCheck.checked = false;
}
//取到当前行的单价，由checks[i]找到tr，再由tr找到含有单价的span
var singlePrice = this.parentNode.parentNode.children[2].children[0].innerHTML;
//取到当前行的数量，由checks[i]找到tr，再由tr找到含有单价的span
var quantity = this.parentNode.parentNode.children[3].children[0].innerHTML;
//判断单选框是否选中，选中则将商品价格累加
if (this.checked) {
price += singlePrice * quantity;
} else {
//取消选中的单选框，则将商品价格累减
price -= singlePrice * quantity;
}
//商品价格显示
Allmoney.innerHTML = price;
}
}
</script>
</body>
</html>
效果图如下所示：
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
