代码-JS之可更改的表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入JS和CSS文件-->
    <link rel="stylesheet" href="css/editTable.css">
    <script src="js/editTable.js"></script>
</head>
<body>
<!--编写HTML-->
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>乐进</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张辽</td>
            </tr>
            <tr>
                <td>3</td>
                <td>张郃</td>
            </tr>
            <tr>
                <td>4</td>
                <td>于禁</td>
            </tr>
            <tr>
                <td>5</td>
                <td>徐晃</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

//编写JS
// 1.页面载入事件
window.onload = function (){
    // 2.隔行换肤
    var tbody = document.getElementsByTagName('tbody')[0];
    var trs = tbody.getElementsByTagName('tr');
    // 3.获取所有td
    var tds = [];
    for(var i=0; i<trs.length; i++){
        tds.push(trs[i].children[1]);
        if(i%2 == 0){
            trs[i].style.backgroundColor='pink';
        }else{
            trs[i].style.backgroundColor='skyblue';
        }
    }
    // console.log(tds);
    // 4.绑定单击事件
    for(var i=0; i<tds.length; i++){
        tds[i].onclick=function(){
            var td =this;
            // 1.设置单input
            if(td.children.length >=1 ){
                return false;
            }
            // 2.获取td里的值
            var text = td.innerHTML;
            td.innerHTML='';
            // 3.创建input
            var input = document.createElement('input');
            // 4.给input样式
            input.style.width = getStyle(td, 'width');
            input.style.height = getStyle(td, 'height');
            input.style.outline = '0 none';
            input.style.fontSize = getStyle(td, 'fontSize');
            input.style.backgroundColor = getStyle(td, 'backgroundColor');
            this.appendChild(input);
            // 5.给input赋值
            input.value = text;
            // 6.获取焦点
            input.focus();

            // 7.绑定键盘事件
            input.onkeyup = function(evt){
                var e = window.event || evt;
                // 1.获取键盘事件
                var keycode = e.keyCode;
                // 2.13是回车，27是esc
                if(keycode == 13){
                    td.innerHTML = this.value;
                }
                if(keycode == 27){
                    td.innerHTML = text;
                }
            }
        };
    }
};

//为了兼容各个浏览器，所以封装一个获取样式的函数
function getStyle(element, styleName){
    if(element.currentStyle){
        //说明是IE浏览器
        return element.currentStyle[styleName]; // 变量不能用于对象的属性，所以这里必须使用方括号的形式
    }else{
        //说明是非IE浏览器
        return getComputedStyle(element)[styleName]; // 变量不能用于对象的属性，所以这里必须使用方括号的形式
    }
}

*{
    /*编写CSS*/
    margin:0;
    padding:0;
    border:0 none;
}
table,th,td{
    border:solid 1px #000;
    border-collapse:collapse;
}
table{
    width:400px;
    margin:10px auto;
}
th,td{
    width:50%;
    padding:3px;
}

代码-JS之可更改的表

相关推荐