Home Web Front-end JS Tutorial A brief introduction to markdown editor

A brief introduction to markdown editor

Sep 09, 2017 am 10:10 AM
markdown introduce editor

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed introduction to what wapi is Detailed introduction to what wapi is Jan 07, 2024 pm 09:14 PM

Users may have seen the term wapi when using the Internet, but for some people they definitely don’t know what wapi is. The following is a detailed introduction to help those who don’t know to understand. What is wapi: Answer: wapi is the infrastructure for wireless LAN authentication and confidentiality. This is like functions such as infrared and Bluetooth, which are generally covered near places such as office buildings. Basically they are owned by a small department, so the scope of this function is only a few kilometers. Related introduction to wapi: 1. Wapi is a transmission protocol in wireless LAN. 2. This technology can avoid the problems of narrow-band communication and enable better communication. 3. Only one code is needed to transmit the signal

Detailed explanation of whether win11 can run PUBG game Detailed explanation of whether win11 can run PUBG game Jan 06, 2024 pm 07:17 PM

Pubg, also known as PlayerUnknown's Battlegrounds, is a very classic shooting battle royale game that has attracted a lot of players since its popularity in 2016. After the recent launch of win11 system, many players want to play it on win11. Let's follow the editor to see if win11 can play pubg. Can win11 play pubg? Answer: Win11 can play pubg. 1. At the beginning of win11, because win11 needed to enable tpm, many players were banned from pubg. 2. However, based on player feedback, Blue Hole has solved this problem, and now you can play pubg normally in win11. 3. If you meet a pub

Essential software for C language programming: five good helpers recommended for beginners Essential software for C language programming: five good helpers recommended for beginners Feb 20, 2024 pm 08:18 PM

C language is a basic and important programming language. For beginners, it is very important to choose appropriate programming software. There are many different C programming software options on the market, but for beginners, it can be a bit confusing to choose which one is right for you. This article will recommend five C language programming software to beginners to help them get started quickly and improve their programming skills. Dev-C++Dev-C++ is a free and open source integrated development environment (IDE), especially suitable for beginners. It is simple and easy to use, integrating editor,

Detailed introduction to whether i5 processor can install win11 Detailed introduction to whether i5 processor can install win11 Dec 27, 2023 pm 05:03 PM

i5 is a series of processors owned by Intel. It has various versions of the 11th generation i5, and each generation has different performance. Therefore, whether the i5 processor can install win11 depends on which generation of the processor it is. Let’s follow the editor to learn about it separately. Can i5 processor be installed with win11: Answer: i5 processor can be installed with win11. 1. The eighth-generation and subsequent i51, eighth-generation and subsequent i5 processors can meet Microsoft’s minimum configuration requirements. 2. Therefore, we only need to enter the Microsoft website and download a "Win11 Installation Assistant" 3. After the download is completed, run the installation assistant and follow the prompts to install Win11. 2. i51 before the eighth generation and after the eighth generation

Introduction to Go language development tools: a list of essential tools Introduction to Go language development tools: a list of essential tools Mar 29, 2024 pm 01:06 PM

Title: Introduction to Go language development tools: List of essential tools In the development process of Go language, using appropriate development tools can improve development efficiency and code quality. This article will introduce several essential tools commonly used in Go language development, and attach specific code examples to allow readers to understand their usage and functions more intuitively. 1.VisualStudioCodeVisualStudioCode is a lightweight and powerful cross-platform development tool with rich plug-ins and functions.

Golang editor recommendations: five choices suitable for development Golang editor recommendations: five choices suitable for development Jan 19, 2024 am 09:00 AM

With the popularity and popularity of Golang, more and more developers are beginning to use this programming language. However, like other popular programming languages, Golang development requires choosing a suitable editor to improve development efficiency. In this article, we will introduce five editors suitable for Golang development. VisualStudioCodeVisualStudioCode (VSCode for short) is a free cross-platform editor developed by Microsoft. It is based on Elect

Introducing the latest Win 11 sound tuning method Introducing the latest Win 11 sound tuning method Jan 08, 2024 pm 06:41 PM

After updating to the latest win11, many users find that the sound of their system has changed slightly, but they don’t know how to adjust it. So today, this site brings you an introduction to the latest win11 sound adjustment method for your computer. It is not difficult to operate. And the choices are diverse, come and download and try them out. How to adjust the sound of the latest computer system Windows 11 1. First, right-click the sound icon in the lower right corner of the desktop and select "Playback Settings". 2. Then enter settings and click "Speaker" in the playback bar. 3. Then click "Properties" on the lower right. 4. Click the "Enhance" option bar in the properties. 5. At this time, if the √ in front of "Disable all sound effects" is checked, cancel it. 6. After that, you can select the sound effects below to set and click

Detailed information on the location of the printer driver on your computer Detailed information on the location of the printer driver on your computer Jan 08, 2024 pm 03:29 PM

Many users have printer drivers installed on their computers but don't know how to find them. Therefore, today I bring you a detailed introduction to the location of the printer driver in the computer. For those who don’t know yet, let’s take a look at where to find the printer driver. When rewriting content without changing the original meaning, you need to The language is rewritten to Chinese, and the original sentence does not need to appear. First, it is recommended to use third-party software to search. 2. Find "Toolbox" in the upper right corner. 3. Find and click "Device Manager" below. Rewritten sentence: 3. Find and click "Device Manager" at the bottom 4. Then open "Print Queue" and find your printer device. This time it is your printer name and model. 5. Right-click the printer device and you can update or uninstall it.

See all articles