京东前端(表格)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cristina_song/article/details/77899841

这里写图片描述

<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>
展开阅读全文

没有更多推荐了,返回首页