js综合练习

浏览数：53 / 时间：2015年06月09日
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body
        {
            height:800px;
        }
        #title
        {
            height:20%;
            width:100%;
            /*background-color:green;*/
            /*top:0px;*/
            
        }
        #title1
        {
            height:80%;
            background-color:green;
        }
        #title2
        {
            height:20%;
            background-color:gray;
            text-align:center;
        }
        #left
        {
            width:20%;
            height:70%;
            float:left;
            background-color:yellow;
        }
        #main
        {
            width:80%;
             height:70%;
            float:right;
            background-color:#0094ff;
        }
        #titleol
        {
            list-style:none; 
            float:right;
            /*绝对定位absolut，不随屏幕一起滚动，脱离文档流
              固定定位 fixed，跟屏幕一起走始终在视野可见位置 脱离文档流
              相对定位 relative，没有脱离文档流，不随屏幕动
              static:静态,不会脱离文档流,无法使用top,left进行偏移
              z-index调整层次数值越大越在上面  
                */
            position:relative;
            top:70%;
        }
        .titleli
        {
            border:1px solid blue;
            width:30px;
            height:20px;
            float:left;
            color:white;
            text-align:center;
            font-size:larger;
            cursor:pointer;
        }
        #tableid01
        {
            border:1px solid red;
            border-collapse:collapse;
            margin:0 auto;
            width:100%;
        }
            #tableid01 td
            {
                border:1px solid red;
            }
       
    </style>
</head>
<body>
    <div id="title">
        <div id="title1">
            <ol id="titleol">
                <li class="titleli">1</li>
                <li class="titleli">2</li>

                <li class="titleli">3</li>
                <li class="titleli">4</li>
            </ol>
        </div>
        <div id="title2"></div>
    </div>
    <div id="left"></div>
    <div id="main">
        
        <table id="tableid01">
            <tr>
                <td><input type="checkbox"  id="ckall"/></td>
                <td >姓名</td>
                <td>年龄</td>
                <td><a href="#" id="deleteall">全删</a></td>

            </tr>
             <tr>
                <td><input type="checkbox" class="ck01" /></td>
                <td class="updatetd">战鹰</td>
                <td>18</td>
                <td><a href="#" class="deletetr">删除</a></td>

            </tr>
             <tr>
                <td><input type="checkbox" class="ck01" /></td>
                <td class="updatetd">王丹</td>
                <td>19</td>
                <td><a href="#" class="deletetr">删除</a></td>

            </tr>
        </table>
            <input type="button" value="加行"  id="btnAdd"/>
        <input type="button" value="修改" id="btnUpdate" />
    </div>
    <div id="bottom"></div>
</body>
</html>
<script type="text/javascript">
    var liObjects = document.getElementsByClassName("titleli")
    var titleimg=document.getElementById("title1");
    var news = document.getElementById("title2");

    //对象数组，将需要的东西封装成对象，根据key来取到所在对象的属性值
    var ObjectArray=[{"key":1,"imgpath":"url(/img/1.jpg)","news":"zzz"},
    {"key":2,"imgpath":"url(/img/2.jpg)","news":"bbb"},
    {"key":3,"imgpath":"url(/img/3.jpg)","news":"aaa"},
    { "key": 4, "imgpath": "url(/img/4.jpg)", "news": "ccc" }]



    for (var i = 0; i < liObjects.length; i++) {
        liObjects[i].onclick = HeightLight;
    }



    //封装高亮方法
    function HeightLight()
    {
        for (var j = 0; j < liObjects.length; j++) {
            liObjects[j].style.backgroundColor="black";
        }
        this.style.backgroundColor="red";
        titleimg.style.backgroundImage = GetbyKey(this.innerHTML.trim()).imgpath;
        news.innerHTML=GetbyKey(this.innerHTML.trim()).news;
        
    }
    //封装getbykey通过对象数组的key判断点击li得到对象
    function GetbyKey(key)
    {
        for (var k = 0; k < ObjectArray.length; k++) {
            if(key==ObjectArray[k].key)
            {return ObjectArray[k];}
        }
    }

    //单击ck全选全反选
    document.getElementById("ckall").onclick = function () {
        var ckobjects = document.getElementsByClassName("ck01");
        for (var i = 0; i < ckobjects.length; i++) {
            ckobjects[i].checked = this.checked;
        }
    }
    //单删除
    var DelObjects = document.getElementsByClassName("deletetr");
    for (var i = 0; i <DelObjects.length; i++) {
        DelObjects[i].onclick = function ()
        {
            var trobject = this.parentNode.parentNode;
            trobject.parentNode.removeChild(trobject);
        }
    }
    //多选删除
    document.getElementById("deleteall").onclick = function ()
    {
        var ckobjects = document.getElementsByClassName("ck01")
        //此处需要注意，数组元素删除，需要倒序删
        for (var i = ckobjects.length-1; i >=0; i--) {
            if (ckobjects[i].checked == true)
            {
              var trobject=  ckobjects[i].parentNode.parentNode;
              trobject.parentNode.removeChild(trobject);
            }
        }
    }

    //table加行
    document.getElementById("btnAdd").onclick = function ()
    {
        var tr = document.createElement("tr");
        tr.innerHTML="<td><input type=‘checkbox‘ class=‘ck01‘ /></td> <td class=‘updatetd‘></td> <td></td> <td><a href=‘#‘ class=‘deletetr‘>删除</a></td>"

        document.getElementById("tableid01").appendChild(tr);
        for (var i = 0; i < DelObjects.length; i++) {
            DelObjects[i].onclick = function () {
                var trobject = this.parentNode.parentNode;
                trobject.parentNode.removeChild(trobject);
            }
        }
    }
   
    //修改
    var tdobjects = document.getElementsByClassName("updatetd");
    var selectedtd;
        for (var i = 0; i < tdobjects.length; i++) {
            tdobjects[i].onclick = function () {
                var inputtxt = document.createElement("input");
                inputtxt.value = this.innerHTML;
                this.innerHTML = "";
                this.appendChild(inputtxt);
                //得到焦点
                inputtxt.focus();
                selectedtd = this;
                //失去焦点事件
                inputtxt.onblur = function () {
                    selectedtd.innerHTML = "";
                    selectedtd.innerHTML = this.value;
                }
            }
        
    }

</script>