笔记
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>购物车</title>
<style>
table {
font-size: 20px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<!-- 购物车 表格 -->
<table border="1" width='100%'>
<!-- 表头 -->
<thead>
<tr>
<th>全选</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td>huawei</td>
<th>8000</th>
<th>1</th>
<th>8000</th>
<th><button>删</button></th>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td>
<button>-</button>
1
<button>+</button>
</td>
<td colspan="3">
<button>删除所选</button>
</td>
<td colspan="3">
总金额：8000 <button>结算</button>
</td>
</tr>
</tfoot>
</table>
<script>
// 删除按钮 删除当前行如果当前产品被勾选则影响总金额计算
// 全选和单选功能直接影响总金额计算
// 删除所选，立即结算按钮 如果没有勾选的项 则两个按钮是不可以被点击的。
</script>
<script src="">
</script>
<script src="">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
font-size: 20px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<!-- 购物车-表格
<table border="1" width='100%'>
表头 -->
<!-- <thead>
<tr>
<th>全选 <input type="checkbox" id="all"> </th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead> -->
<!-- 表体 -->
<!-- <tbody id="tbody">
<tr>
<td> <input type="checkbox"> </td>
<td>华为</td>
<td>8000</td>
<td>1</td>
<td>8000</td>
<td><button>删</button></td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td>小米</td>
<td>6000</td>
<td>1</td>
<td>6000</td>
<td><button>删</button></td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td>vivo</td>
<td>4800</td>
<td>1</td>
<td>4800</td>
<td><button>删</button></td>
</tr>
</tbody>
表尾
<tfoot>
<tr>
<td colspan="3">
<button>删除所选</button>
</td>
<td colspan="3">
总金额：8000 <button>结算</button>
</td>
</tr>
</tfoot> --> -->
<!-- </table>
<script>
var el = e.target, type = el.innertext;
console.log(type);
if (type === '+') {
} else {
el.parentnode.parentnode.remove();
}
var el = e.target, type = el.innertext;
console.log(type);
if (type === '-' && s.innerText > 0) {
s.innertext -= 1
} else if{
el.parentnode.parentnode.remove();
}{
var tds = el.parentnode.parentnode.queryselectorall('td');
}
$('#tbody').on('click', 'input', (e) =>)
{ }
var all = $('#tbody').find('input')
var state = all.every(i) => i.
)} -->
<!-- // $('#all').on('change', function () {
// console.log(this.checked);
// console.log($('#tbody input'))
// })
// !--当数量被修改的时候会触发 -->
<!-- // $()('#tbody').on('DOMSubtreeModified', ())
// => {
// TODO：待开发 --> -->
<!-- } -->
$(document).ready(function () {
function fixHeight() {
var headerHeight = $("#switcher").height();
$("#iframe").attr("height", $(window).height() - 54 + "px");
}
$(window).resize(function () {
fixHeight();
}).resize();
$('.icon-monitor').addClass('active');
$(".icon-mobile-3").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width-3');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-mobile-2").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width-2');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-mobile-1").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width');
$('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-tablet").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('tablet-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-monitor").click(function () {
$("#by").css("overflow-y", "hidden");
$('#iframe-wrap').removeClass().addClass('full-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
<script>
// <!-- 总结算的函数 -->
function (){
}
</script>
</script>
</body>
</html>
