JavaScript 的基本用法(六):简单练习,有助于理解js

1 按下Ctrl键,使在下表中“操作”列中选择同时使被勾选的那些行,获得同样的选择?
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网吧管理系统</title>
</head>
<body>
<table border="1px" >
        <thead>
            <tr>
                <th>#</th>
                <th>机号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input title="勾选" type="checkbox"></td>
            <td>1</td>
            <td>
                <select title="操作" name="state" id="select0">
                        <option value="0">离线</option>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input title="勾选" type="checkbox"></td>
            <td>2</td>
            <td>
                <select title="操作" name="state" id="select1">
                        <option value="0">离线</option>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input title="勾选" type="checkbox"></td>
            <td>3</td>
            <td>
                <select title="操作" name="" id="select2">
                        <option value="0">离线</option>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input title="勾选" type="checkbox"></td>
            <td>4</td>
            <td>
                <select title="操作" name="" id="select3">
                        <option value="0">离线</option>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input title="勾选" type="checkbox"></td>
            <td>5</td>
            <td>
                <select title="操作" name="" id="select4">
                        <option value="0">离线</option>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input title="勾选" type="checkbox"></td>
            <td>5</td>
            <td>
                <select title="操作" name="" id="select5">

                </select>
            </td>
        </tr>
        </tbody>
</table>

<script src="jquery-3.2.1.min.js"></script>
<script>
        $("document").ready(function () {

            var keyOnctrl=false;
            $bodyEle= $("body");
            $bodyEle.on("keydown",function (event) {

                if (event.keyCode === 17) {
                    keyOnctrl = true;
                    console.log(event.keyCode)
                    }
            });

            $bodyEle.on("keyup",function (event) {
                if (event.keyCode === 17) {
                    keyOnctrl = false;
                    console.log(event.keyCode)
                }
            } )

            $selectEles=$("select");
            $selectEles.on("change",function () {
                if (keyOnctrl===true){
                    check_val=this.value;
                    console.log(this,check_val);
                    $("input[type='checkbox']:checked").parentsUntil("tbody").find('select').val(check_val)
                }

            })




        })

</script>
</body>
</html>
View Code

猜你喜欢

转载自www.cnblogs.com/yuanji2018/p/9806915.html
今日推荐