关于冒泡事件的一个随机数小案例

今天朋友说了一个关于冒泡事件的例子，表格用js生成一个一条tr的时候，tr里的delete和random不能使用，这时候就会要想到是冒泡的问题了，冒泡事件是由最内层的div开始触发的，当你如果再直接用当前元素绑定的话，在页面解析时，你生成的那个tr里的事件就不会再执行了，所以你需要在最外层绑定，在document层绑定，这样解析时，你的添加的tr层里的事件就能够执行。注释我写了很多，大家可以看注释，有问题我们可以一起探讨。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机数表格</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        td{
            width: 110px;
        }
    </style>
</head>
<body>
<table class="Table" border="1">
    <tr>
        <th class="addH">add</th>
        <th class="allRandom">allR</th>
    </tr>
    <tr class="firstH">
        <td>空</td>
        <td>空</td>
        <td>空</td>
        <td class="randomH">random</td>
        <td class="deleteH">delete</td>
    </tr>
</table>
<script>
    $(document).ready(function () {
        //添加一行的操作
        $(document).on('click','.addH',function() {
                //var $td = $(".firstH").clone()
                //给出一行空行
                var $td = $("<tr class=\"firstH\">\n" +
                    "        <td>空</td>\n" +
                    "        <td>空</td>\n" +
                    "        <td>空</td>\n" +
                    "        <td class=\"randomH\">random</td>\n" +
                    "        <td class=\"deleteH\">delete</td>\n" +
                    "    </tr>");
                $("table").append($td).children('td');
               // $("table tr:last").val("");
            //})
            /*var $td = $(".firstH").clone();
            $("table").append($td);
            //$("table tr:last").val("");*/
        });
        //random每一行
        $(document).on('click','.randomH',function () {
           // this.parent().$("tr td:nth-child(1)").html(getRandom(10));
           //  给每个“空”给出随机数这里其实用循环写更好
            $(this).parent().children('td').eq(0).html(getRandom(10));
            $(this).parent().children('td').eq(1).html(getRandom(10));
            $(this).parent().children('td').eq(2).html(getRandom(10));
           // $(this).parent().$("tr td:nth-child(3)").html(getRandom(10));
        });
        //删除本行
        $(document).on("click",'.deleteH',function () {
           $(this).parent().remove();
        });

        //给所有的表格参数随机
        $(document).on('click','.allRandom',function () {
            //alert(1)
            // var $trL = $("tr").length*3;
            //用两层for循环，主要就是为了取到确定的那个“空”
            for(var j=1; j <= $("tr").length; j++) {
                for (var i = 0; i < 3; i++) {
                    $("tr").eq(j).children().eq(i).html(getRandom(10));
                    //$("tr:nth-child(j)").$("td:nth-child(i)").html(getRandom(10));
                    /*$("tr td:nth-child(2)").html(getRandom(10));
                    $("tr td:nth-child(3)").html(getRandom(10));*/
                };
            };
        });
        //随机数函数
       function getRandom(n){
            return Math.floor(Math.random()*n+1)
        }
    })
</script>
</body>
</html>

关于冒泡事件的一个随机数小案例

猜你喜欢