HTML函数回调传值小讲解_html页面接收回调消息-CSDN博客

本文链接：https://blog.csdn.net/Myworldlet/article/details/78150601

今天有时间给大家分享一下 HTML函数调用的小方法

先简单说下  我今天做一个添加删除课程表的

当内容中已经有了我们添加的 就不能重复添加了 删除之后还能继续添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.slim.js"></script>
    <style>
        body {
            padding: auto auto;
        }

        .allwork {
            width: 400px;
            height: 400px;
            background-color: #3ef1ee;
        }

        button {
            margin-left: 20px;
        }

        table {
            border: 1px solid black;
            float: left;
        }

        .everywork {
            width: 400px;
            height: auto;
            background-color: silver;
        }
    </style>
</head>
<body>
<div class="allwork">
</div>
<div class="everywork">
    <button οnclick="sport()">体育</button>
    <button οnclick="English()">英语</button>
    <button οnclick="math()">数学</button>
    <button οnclick="hh()">美术</button>
    <button οnclick="Chinese()">语文</button>
</div>

<script>
    //这儿创建一个空的数组是用来放我们点击之后的数据
    var worklist = [];

    //这个就是一个回调函数  判断我们点击的信息是否已经存入创建的空数组中
    function run(name) {
        var result = false;
        for (var i = 0; i < worklist.length; i++) {
            if (name == worklist[i]) {
                result = true;
            }
        }
        return result;
    }

    /* 当我们点击体育按钮的时候首先判断是否之前点击过  在数组中循环查找
    * 当没有的时候就调用最下面的方法add的添加方法
    * 并且同时创建 删除的点击事件
    * 下面都是重复的调用两个方法传值 判断
    * */

    function sport() {
        var name = "体育";
        var pwd = "ty";
        if (run(name)) {
        } else {
            add(name, pwd);
            deletes(name, pwd);
        }
    }

    function English() {
        var name = "英语";
        var pwd = "yy";
        if (run(name)) {
        } else {
            add(name, pwd);
            deletes(name, pwd);
        }
    }

    function math() {
        var name = "数学";
        var pwd = "sx";
        if (run(name)) {
        } else {
            add(name, pwd);
            deletes(name, pwd);
        }
    }

    function hh() {
        var name = "美术";
        var pwd = "ms";
        if (run(name)) {
        } else {
            add(name, pwd);
            deletes(name, pwd);
        }
    }

    function Chinese() {
        var name = "语文";
        var pwd = "yw";
        if (run(name)) {
        } else {
            add(name, pwd);
            deletes(name, pwd);

        }
    }

    /*
    * 这个就是添加的方法，判断空的集合没有这个数据，
    * 我们就把这个数据添加进入数组，并且在页面中创建出
    * 
    * */
    function add(name, pwd) {
        worklist.push(name);
        $(".allwork").append("    <table>" +
            "        <tr >" +
            "            <td>" + name + "</td>" +
            "            <td>" +
            "                <button class=" + pwd + ">×</button>" +
            "            </td>" +
            "        </tr>" +
            "    </table>");
    }

    /*
    * 在我们创建添加的方法后就 紧跟着创建了 删除的点击事件 传值，判断我么么要删除的是那一条数据
    * 并且在数组中也删除掉
    * */
    function deletes(name, pwd) {
        $("." + pwd).click(function () {
            $(this).parent().parent().remove();
            for (var i = 0; i < worklist.length; i++) {
                if (name == worklist[i]) {
                    worklist.splice(i);
                } else {

                }
            }
        });
    }
</script>
</body>
</html>