A brief introduction to markdown editor-JS Tutorial-php.cn

A brief introduction to markdown editor

一个新手

Release： 2017-09-09 10:10:16

Original

1517 people have browsed it

A brief introduction to markdown editor

<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(&#39;jsTrolley&#39;).getElementsByTagName(&#39;tbody&#39;)[0];
    (items || []).forEach(function (item) {
        var tr = document.createElement(&#39;tr&#39;);
        tr.innerHTML = &#39;<td>&#39; + item.name

 + &#39;</td><td>&#39; + item.price.toFixed(2) + &#39;</td><td><a href="javascript:void(0);">删除</a></td>&#39;;
        tbody.appendChild(tr);
    });
    update();
}function bind() {
    debugger;    var table = document.getElementById(&#39;jsTrolley&#39;);
    table.addEventListener(&#39;click&#39;, function (event) {
        var el = event.target;        if (el.tagName.toLowerCase() === &#39;a&#39;) {
            tr = el.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
            update();
        }
    });
}function update() {
    var table = document.getElementById(&#39;jsTrolley&#39;);    
    var tbody = table.getElementsByTagName(&#39;tbody&#39;)[0];    
    var tfoot = table.getElementsByTagName(&#39;tfoot&#39;)[0];    
    var tr = [].slice.call(tbody.getElementsByTagName(&#39;tr&#39;), 0);    
    var total = 0;
    tr.forEach(function (tr) {
        total += +(tr.getElementsByTagName(&#39;td&#39;)[1].innerHTML.trim());
    });
    tfoot.getElementsByTagName(&#39;td&#39;)[0].innerHTML = total.toFixed(2) + &#39;(&#39; + tr.length + &#39;件商品)&#39;;
}</script>

Copy after login

The above is the detailed content of A brief introduction to markdown editor. For more information, please follow other related articles on the PHP Chinese website!