suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Einführung in den Markdown-Editor

Eine kurze Einführung in den Markdown-Editor

一个新手
一个新手Original
2017-09-09 10:10:161531Durchsuche

Eine kurze Einführung in den 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>

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in den Markdown-Editor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung anonymer js-Funktionen und Beispiele für die ParameterübergabeNächster Artikel：Detaillierte Erläuterung der Verwendung anonymer js-Funktionen und Beispiele für die Parameterübergabe

In Verbindung stehende Artikel

Mehr sehen