js之DOM对象(3)

表格示例(取消,全选,反选)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格示例</title>
</head>
<body>
<button class="select">全选</button>
<button class="reserve">反选</button>
<button class="cancel">取消</button>
<table border="1">
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
         <td>333</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
         <td>333</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
<script>
//    方式一：分别给每个button增加事件
//     var ele_select = document.getElementsByClassName('select')[0];
//     var ele_reserve = document.getElementsByClassName('reserve')[0];
//     var ele_cancel = document.getElementsByClassName('cancel')[0];
//     var ele_input = document.getElementsByClassName('check');
    //全选
    // ele_select.onclick = function () {
    //     for (var i = 0; i < ele_input.length; i++) {
    //         ele_input[i].checked = 'checked'
    //     }
    // };
    // //取消
    // ele_cancel.onclick = function () {
    //      for (var i =0;i<ele_input.length;i++){
    //         //删除checked属性，直接设置为空就行了
    //         ele_input[i].checked = ''
    //     }
    // };
    // //反选
    // ele_reserve.onclick = function () {
    //     for (var i = 0; i < ele_input.length; i++) {
    //         var ele = ele_input[i];
    //         if (ele.checked) {//如果选中了就设置checked为空
    //             ele.checked = '';
    //         }
    //         else {//如果没有就设置checked = checked
    //             ele.checked = 'checked';
    //         }
    //      }
    // };

    //方式二：方式一的优化循环增加事件
   var ele_button = document.getElementsByTagName('button');
   var ele_input = document.getElementsByClassName('check');
   for(var i=0;i<ele_button.length;i++) {
       ele_button[i].onclick = function () {
           if (this.innerHTML == '全选') {
               for (var i = 0; i < ele_input.length; i++) {
                   //添加一个checked属性
                   ele_input[i].checked = 'checked'
               }
           }
           else if (this.innerHTML == '取消') {
               for (var i = 0; i < ele_input.length; i++) {
                   //删除checked属性，直接设置为空就行了
                   ele_input[i].checked = ''
               }
           }
           else {
               for (var i = 0; i < ele_input.length; i++) {
                   var ele = ele_input[i];
                   if (ele.checked) {//如果选中了就设置checked为空
                       ele.checked = '';
                   }
                   else {//如果没有就设置checked = checked
                       ele.checked = 'checked';
                   }
               }
           }
       }
   }
</script>
</body>
</html>

示例

模态对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>

<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>


<script>


    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){

            if(this.value=="click"){

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.remove("hide");

                 }

            }
            else {
                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");
                }

            }
        }
    }

</script>

</body>
</html>

模态对话框

示例

猜你喜欢