找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js事件委托

2019-01-29 分类：JavaScript 阅读(940) 评论(2)
j2ee开发 属于前端还是后台
前端开发和后台开发
前端 后台 开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”Author” content=”FengYu” />
        <title>Tz-34期js</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: Microsoft YaHei, serif;
            }
            li {
                list-style: none;
            }
            table {
                border-collapse: collapse;
                margin: 50px auto;
            }
            table thead tr {
                font-weight: bold;
                font-size: 18px;
            }
            tr {
                text-align: center;
                height: 30px;
            }
            td {
                width: 100px;
            }
            td.del:hover {
                color: red;
                cursor: pointer;
            }
            #foot {
                width: 100%;
                height: 30px;
            }
            #foot ul {
                width: 50%;
                height: 100%;
                float: right;
                min-width: 280px;
            }
            #foot ul li {
                float: left;
                padding: 5px 10px;
                background: #f60;
                font-size: 14px;
                font-weight: bold;
                margin-right: 5px;
                color: #fff;
                cursor: pointer;
            }
            tbody tr.on {
                background: green;
            }
        </style>
        <script src=”https://git.oschina.net/cx-fy/personal/raw/master/conmenu.js”></script>
    </head>
    <body>
        <table border=”1″>
            <thead>
                <tr>
                    <td>Select</td>
                    <td>Name</td>
                    <td>ID</td>
                    <td>Num</td>
                    <td>delete</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class=”check”><input type=”checkbox””></td>
                    <td>王大狗</td>
                    <td>3401</td>
                    <td>8</td>
                    <td class=”del”>删除</td>
                </tr>
                <tr>
                    <td class=”check”>
                        <input type=”checkbox” onclick=”checked()” />
                    </td>
                    <td>赵二狗</td>
                    <td>3402</td>
                    <td>9</td>
                    <td class=”del”>删除</td>
                </tr>
                <tr>
                    <td class=”check”>
                        <input type=”checkbox” onclick=”checked()” />
                    </td>
                    <td>孙小狗</td>
                    <td>3403</td>
                    <td>10</td>
                    <td class=”del”>删除</td>
                </tr>
            </tbody>
        </table>
        <div id=”foot”>
            <ul>
                <li>新增</li>
                <li>删除</li>
                <li>反选</li>
                <li>全选</li>
                <li>全不选</li>
            </ul>
        </div>
        <script>
            var aDel = document.getElementsByClassName(‘del’),
                Tbody = document.getElementsByTagName(‘tbody’)[0],
                aTr = Tbody.getElementsByTagName(‘tr’),
                aLi = document.querySelectorAll(‘#foot ul li’)
            //删除得需要从后面遍历删除 不然删除前面的 后面会补上 最后会剩余一位数
            aLi[1].onclick = function() {
                for (var i = aTr.length – 1; i >= 0; i–) {
                    if (aTr[i].ifCheck) {
                        Tbody.removeChild(aTr[i])
                    }
                }
            }
            // 反选
            aLi[2].onclick = function() {
                for (var i = 0; i < aTr.length; i++) {
                    var check = aTr[i].children[0].children[0]
                    check.checked = aTr[i].ifCheck = !aTr[i].ifCheck
                    aTr[i].className = aTr[i].ifCheck ? ‘on’ : ”
                }
            }
            //全选择
            aLi[3].onclick = function() {
                for (var i = 0; i < aTr.length; i++) {
                    var check = aTr[i].children[0].children[0]
                    check.checked = aTr[i].ifCheck = true
                    aTr[i].className = aTr[i].ifCheck ? ‘on’ : ”
                }
            }
            //全部选
            aLi[4].onclick = function() {
                for (var i = 0; i < aTr.length; i++) {
                    var check = aTr[i].children[0].children[0]
                    check.checked = aTr[i].ifCheck = false
                    aTr[i].className = aTr[i].ifCheck ? ‘on’ : ”
                }
            }
            //预存克隆防止全部被删除
            var td0 = aTr[0].children[0].cloneNode(true)
            var td4 = aTr[0].children[4].cloneNode(true)
            //新增加克隆
            aLi[0].onclick = function() {
                var tr = document.createElement(‘tr’),
                    oTd0 = td0.cloneNode(true),
                    oTd1 = document.createElement(‘td’),
                    oTd2 = document.createElement(‘td’),
                    oTd3 = document.createElement(‘td’),
                    oTd4 = td4.cloneNode(true)
                oTd1.innerHTML = prompt(‘请输入Name值’)
                oTd2.innerHTML = 3000 + aTr.length + 1
                oTd3.innerHTML = prompt(‘请输入Name值’)
                tr.appendChild(oTd0)
                tr.appendChild(oTd1)
                tr.appendChild(oTd2)
                tr.appendChild(oTd3)
                tr.appendChild(oTd4)
                Tbody.appendChild(tr)
            }
            //基于事件委托
            Tbody.onclick = function(e) {
                var This = this
                e = e || window.event
                var target = e.target || e.srcElement
                var Tr = target.parentNode
                if (target.className === ‘del’) {
                    e.cancelBubble = true
                    if (target.parentNode.ifCheck && confirm(‘确定删除么？’)) {
                        This.removeChild(target.parentNode)
                    }
                } else {
                    var check = Tr.children[0].children[0]
                    check.checked = Tr.ifCheck = !Tr.ifCheck
                    Tr.className = Tr.ifCheck ? ‘on’ : ”
                }
            }
        </script>
    </body>
</html>
前端开发 后台开发
前端开发读取后台数据
前端开发还是后台开发好
赞(0)
前端开发者 » 前端开发js事件委托
64K
标签：前端开发者

前端开发者

相关推荐

评论 2

评论前必须登录！

 

  1. #1

    能转吗

    匿名4年前 (2019-02-12)

    • 可以的，互相学习

      前端开发者4年前 (2019-02-17)

最新评论