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
 
2 实现下图所有功能；
　　　　

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>周末作业分解</title>
  <style>
    #myModal{
      position: fixed;
      top: 20%;
      left: 40%;
      z-index: 200;
      border: white 1px solid;
      padding: 10px;
      display: none;

    }
    .back{
      display: none;
      height: 100%;
      width: 100%;
      background-color: rgba(0,0,0,0.5);
      position: fixed;
      z-index: 100;
    }
  </style>
</head>


<body>
<div class="back"></div>

<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>爱好</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>街舞</td>
    <td>
      <button class="edit-btn">编辑</button>
      <button class="delete-btn">删除</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Alex</td>
    <td>烫头</td>
    <td>
      <button class="edit-btn">编辑</button>
      <button class="delete-btn">删除</button>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>苑局</td>
    <td>日天</td>
    <td>
      <button class="edit-btn">编辑</button>
      <button class="delete-btn">删除</button>
    </td>
  </tr>
  </tbody>
</table>
<button id="add">新增</button>

<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
  <div>
    <p>
      <label for="modal-name">姓名</label>
      <input type="text" id="modal-name">
    </p>
    <p>
      <label for="modal-habit">爱好</label>
      <input type="text" id="modal-habit">
    </p>
    <p>
      <button id="modal-submit">提交</button>
      <button id="modal-cancel">取消</button>
    </p>
  </div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
        //编辑初始化时的div#myModal,ok
        //给新增按钮安上相应功能，1单击事件---使div.back和div#myModal出现

        $back=$('.back');
        $myModal=$('#myModal');
        $modalSubmit=$("#modal-submit");
        $modalCancel=$("#modal-cancel");
        $edit=$(".edit-btn");
        $delete=$(".delete-btn");
        $newModal_tr=$('tbody tr:first').clone();
        var submitMode=0;
        function jumpMyMoal() {
            $back.css('display','inline');
            $myModal.css('display','inline');
        }
        function hideMyMoal() {
            $back.css('display','none');
            $myModal.css('display','none');

        }
        function clearMyModal() {
            $myModal.find(':text').val("")
        }

        function sortIndex() {
            for (var i=0;i<$('tbody tr').length;i++){
                $('tbody tr')[i].children[0].innerText=i+1
            }
        }

        //新增按钮的作用
        $("#add").on('click',function () {
            jumpMyMoal();
            submitMode=1 //新增模式

        });


        //提交按钮功能----在tbody的最后加上一行新增tr，tr内应该有正确的值
        $modalSubmit.on("click",function () {
           if ($("#modal-name").val() && $("#modal-habit" ).val() && submitMode === 1){

               $newModal_tr=$newModal_tr.clone();
               $newModal_tr.children()[1].innerText=$("#modal-name").val();
               $newModal_tr.children()[2].innerText=$("#modal-habit").val();
               $('tbody').append($newModal_tr);
               sortIndex();
               hideMyMoal();
               clearMyModal();
               submitMode =0
           }
           else if  ($("#modal-name").val() && $("#modal-habit").val()  && submitMode === 2 ){
               $("tr[editing] td")[1].innerText=$("#modal-name").val();
               $("tr[editing] td")[2].innerText=$("#modal-habit").val();
               $("tr[editing]").removeAttr("editing");
               hideMyMoal();
               clearMyModal();
               submitMode =0
           }
           else {
               alert('数据为空不能提交')
            }
        });
        //取消按钮的功能
        $modalCancel.on("click",function () {
            hideMyMoal();
            clearMyModal();
            submitMode=0
        });
        //编辑按钮的功能
        $("tbody").on("click",".edit-btn",function () {
            jumpMyMoal();

           $("#modal-name").val( $(this).parentsUntil('tr').siblings()[1].innerText);
           $("#modal-habit").val( $(this).parentsUntil('tr').siblings()[2].innerText);
           submitMode=2;   //编辑模式
            $(this).parent().parent().attr('editing',true)

        });
        //删除按钮
        $("tbody").on("click",".delete-btn",function (){
            $(this).parent().parent().remove()
            sortIndex();

        })


        //给索引栏开启自动填写功能---没有错位的数字，有资料的每一栏有正确的数字
</script>
</body>
</html>
View Code

 用JavaScript，写一个类似python的 in函数，

 function In(a,k){for (x in k){
	if (k[x]===a){
	return true;
	}else if( k[x]!==a && x<(k.length-1))
    {continue}
	else{return false
}}}

 

 　　function trim(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }
　　 function ltrim(str){ //删除左边的空格
　　     return str.replace(/(^\s*)/g,"");
　　 }
　　 function rtrim(str){ //删除右边的空格
　　     return str.replace(/(\s*$)/g,"");
　　 }

posted @ 2018-10-17 20:36  吉元吉  阅读(137)  评论(0)  编辑  收藏  举报