markdown编辑器的简单介绍
程序员文章站
2022-05-29 22:42:06
...
<html>
<head>
<style type="text/css">
body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;}
table{
border-collapse:
collapse;
width: 100%;
table-layout:
fixed;}
thead{
background: #3d444c;
color: #ffffff;}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;}
</style>
</head>
<body>
<table id="jsTrolley">
<thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
<tbody>
<tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
</tbody>
<tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot></table></body></html><script type="text/javascript">window.onload = function(){//页面加载完之后执行
add([{name:"213",price:1},{name:"456",price:3}]);//调用
bind();//调用}function add(items) {
var tbody = document.getElementById('jsTrolley').getElementsByTagName('tbody')[0];
(items || []).forEach(function (item) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + item.name
+ '</td><td>' + item.price.toFixed(2) + '</td><td><a href="javascript:void(0);">删除</a></td>';
tbody.appendChild(tr);
});
update();
}function bind() {
debugger; var table = document.getElementById('jsTrolley');
table.addEventListener('click', function (event) {
var el = event.target; if (el.tagName.toLowerCase() === 'a') {
tr = el.parentNode.parentNode;
tr.parentNode.removeChild(tr);
update();
}
});
}function update() {
var table = document.getElementById('jsTrolley');
var tbody = table.getElementsByTagName('tbody')[0];
var tfoot = table.getElementsByTagName('tfoot')[0];
var tr = [].slice.call(tbody.getElementsByTagName('tr'), 0);
var total = 0;
tr.forEach(function (tr) {
total += +(tr.getElementsByTagName('td')[1].innerHTML.trim());
});
tfoot.getElementsByTagName('td')[0].innerHTML = total.toFixed(2) + '(' + tr.length + '件商品)';
}</script>
以上就是markdown编辑器的简单介绍的详细内容，更多请关注其它相关文章！