首页手记 http://www.imooc.com/code/1...

http://www.imooc.com/code/1636 编程练习答案

标签：

Html/CSS JavaScript

<!DOCTYPE html>
<html lang="zh">

<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    .hoverStyle {
        background-color: gray;
    }
    </style>
</head>

<body>
    <button>刷新</button>
    <br />
    <br />
    <br />
    <table border="1" width="80%" id="table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>xh001</td>
            <td>王小明</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
    </table>
    <input type="button" value="添加一行" />
    <script type="text/javascript">
    window.onload = function() {

        var d = document;
        var t = d.querySelector('table');
        var tc = t.querySelectorAll('tr');
        var ntc;
        var cs = tc[1].cloneNode(true);
        var addBtn = d.querySelector('input');
        var reflush = d.querySelector('button');

        t.style.textAlign = 'center';
        addBtn.style.cssText = 'margin-top:20px;cursor:pointer;'

        addBtn.addEventListener('click', function() {
            var cl = cs.cloneNode(true);
            cl.querySelectorAll('td')[0].innerHTML = '';
            cl.querySelectorAll('td')[1].innerHTML = '';
            t.appendChild(cl);
            ntc = t.querySelectorAll('tr');

        }, false)

        t.addEventListener('mouseenter', function() {
            ntc = t.querySelectorAll('tr');
            for (var i = 1; i < ntc.length; i++) {
                ntc[i].addEventListener('mouseenter', function() {
                    this.className = 'hoverStyle';
                }, false)
                ntc[i].addEventListener('mouseout', function() {
                    this.className = '';
                }, false)

                var a = ntc[i].querySelector('a');
                a.addEventListener('click', function() {
                    var thisTr = this.parentNode.parentNode;
                    if (thisTr.parentNode) {
                        thisTr.parentNode.removeChild(thisTr);
                    }
                }, false)

            }

        }, false)

        reflush.addEventListener('click', function() {
            var a = [];
            for (var i = 1; i < ntc.length; i++) {
                var td1 = ntc[i].querySelectorAll('td')[0];
                a.push(td1);
            }
            for (var i = 0; i < a.length; i++) {
                var nu = function() {
                    var cc = '00' + (i + 1);
                    var dd = cc.substr(-3)
                    return dd;
                }
                a[i].innerHTML = '';
                a[i].innerHTML = 'xh' + nu();
            }
        })

    }
    </script>
</body>

</html>

点击查看更多内容