码迷,mamicode.com
首页 > Web开发 > 详细

5.2jquery案例2

时间:2019-08-03 13:09:35      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:问题   not   tco   秦皇岛   alert   实现   idt   填充   city   

1.仿qq列表分组

技术图片

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
body{
    font-family: "微软雅黑";
}
table {
    border:#0099FF 1px solid;
    width:100px;
    border-collapse:collapse;
    margin:15px 10px;
    width:10%;
}
    
table td{
    border:#0066FF 1px solid;
    background-color:#6f5f3e;
    text-align:center;
    padding: 5px 0px;
}

    
table td div {
    background-color:#FFFF99;
    text-align:left;
    line-height: 24px;
    padding-left: 14px;
}
    
table td a:link, table td a:visited {
    color:#00ffFF;
    text-decoration:none;
}
    
table td a:hover {
    color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div { display:none; }

.open { display:block; }
    
.close { display:none; } 

</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    /* --通过jQuery实现访QQ列表好友分组-- */
    function openDiv(thisobj){
        //1.隐藏其他行的div
        //1.1把thisobj的js对象转成jquery对象
        //获取a标签的祖先tr,通过祖先tr找到其他行(tr) 找到每行的div并隐藏
        $(thisobj).parents("tr").siblings("tr").find("div").hide();
        //2.当前行的div切换成显示状态
        //找到点击a标签下面的div 改变状态
        $(thisobj).next().toggle();
        
    }
    
    /* --通过js实现访QQ列表好友分组--
    function openDiv(thisobj){
        var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
        var aDiv = document.getElementsByTagName("div");

        //判断当前分组div是展开还是关闭
        if(oDiv.style.display == "block"){
            //如果当前div是打开的, 只需关闭该div即可
            oDiv.style.display = "none";
        }else{
            //如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的  
            for(var i=0;i<aDiv.length; i++){
                aDiv[i].style.display = "none";
            }
            oDiv.style.display = "block";
        }
    }
     */
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
            <div>
                秦始皇<br />
                刘邦<br />
                李世民<br />
                康熙<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
            <div>
                刘备<br />
                关羽<br />
                张飞<br />
                赵云<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
            <div>
                西施<br />
                貂蝉<br />
                杨贵妃<br />
                王昭君<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
            <div>
                马云<br />
                李开复<br />
                俞敏洪<br />
                黎活明<br />
            </div>
        </td>
    </tr>
</table>
</body>
</html>

2.二级联动下拉框

 技术图片

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script>
    var data = {
        "北京市": ["海淀区","朝阳区","丰台区"],
        "河北省": ["石家庄","唐山","秦皇岛"],
        "辽宁省": ["沈阳","大连","鞍山"],
        "山东省": ["青岛","济南","烟台"]
    }
    
    /* --通过jQuery实现二级联动下拉框 -- */
    function selectCity(thisobj){
        //获取省市信息
        var province = $("#province").val();
        //根据省市信息获取对应城市信息
        var citys = data[province];
        //清空
        $("#city").html("<option>--请选择--</option>")
        for(var i=0;i<citys.length;i++){
            $("#city").append("<option>"+citys[i]+"</option>")
        }
        

        
    }
    
    /* --通过js实现二级联动下拉框--
    function selectCity(thisobj){
        //获取用户选中的省份
        var prov = thisobj.value;
        //再根据省份获取对应的市区
        var citys = data[prov];
        //获取第二个下拉列表
        var oCitySele = document.getElementById("city");
        //清空之前的数据
        oCitySele.innerHTML = "<option>--选择城市--</option>";

        //循环遍历, 将每一个城市依次填充到第二个下拉列表中
        for(var i=0; i<citys.length; i++){
            var oOption = document.createElement("option");
            oOption.innerHTML = citys[i];
            //将option挂载到select上
            oCitySele.appendChild(oOption);
        }
    }
     */
</script>
<!-- 
js实现注意问题: 
    ie10以下的浏览器不支持 select,table上的innerHTML属性
    删除option时,由于删除后,options长度发生了变化,所以直接用for循环会有漏删的情况,可以由后向前删除,可以避免这样的问题
-->
</head>

<body>
    
    <select name="country" onchange="getCountry()"  >
        <option value="none">--选择国家--</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
    </select>
    <br><br>
    <hr/>
    <br>
    <div id="seleDiv">
        <select id="province" onchange="selectCity(this)">
            <option>--选择省市--</option>
            <option>北京市</option>
            <option>河北省</option>
            <option>辽宁省</option>
            <option>山东省</option>
        </select>
        <span id="citySpan">
            <select id="city">
                <option>--选择城市--</option>
            </select>
        </span>
    </div>
</body>

</html>

 3.模拟员工信息管理系统

技术图片

<!DOCTYPE HTML>
<html>
<head>
<title>table练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
    body{
        font-family: "微软雅黑"
    }
    h2, h4{ text-align: center; }
    div#box1, div#box2 {
        text-align:center;
    }
    hr{
        margin: 20px 0;
    }
    table{ 
        margin: 0 auto; 
        width: 70%;
        text-align: center;
        border-collapse:collapse;
    }
    td, th{padding: 7px; width:20%;}
    th{
        background-color: #DCDCDC;
    }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">

    //html文档加载完执行
    $(function(){
        //为"添加"按钮绑定点击事件(点击按钮添加员工信息到table中)
        $("#add").click(function(){
            //获取输入员工信息
            ////采用后代选择器  $.trim的作用是取出输入的前后空格
            var id = $.trim($("#box1 input[name=‘id‘]").val());    
            var name = $.trim($("#box1 input[name=‘name‘]").val());
            var email = $.trim($("#box1 input[name=‘email‘]").val());    
            var salary = $.trim($("#box1 input[name=‘salary‘]").val());
            //  校验员工信息
            //员工信息不能为空
            if(id == "" || name == "" || email == "" || salary == ""){
                alert("员工信息不能为空");
                return;
            }
            //员工id不能重复
            var flag = false;
            $("table tr").each(function(){
                //判断id是否等于每行第二个td内的文本, 即id
                if($(this).find("td:eq(1)").text() == id){
                    alert("ID已存在!");
                    flag = true;
                    return false;
                }
            });
            if(flag){ //如果id相等 ,中断该程序
                return;
            }
            //将新员工的信息插入到员工列表中
            var $tab = $("table");  //元素名选择器
            var $tr = $("<tr></tr>"); //$tr 没有什么意思只是为了做区分他是jquery对象,是一个标记
            
            var $td0 = $("<td><input type=‘checkbox‘></td>");
            var $td1 = $("<td>"+id+"</td>");
            var $td2 = $("<td>"+name+"</td>");
            var $td3 = $("<td>"+email+"</td>");
            var $td4 = $("<td>"+salary+"</td>");
            //将td与tr拼接
            $tr.append($td0).append($td1).append($td2).append($td3).append($td4);
            $tab.append($tr);
        });

        //为全选按钮绑定点击事件
        $("#all").click(function(){
            //获取全选状态
            var check = $(this).attr("checked");
            //将所有复选框状态与全选保持一致
            $("table input[type=‘checkbox‘]").attr("checked",check);
        });

        //为"删除"绑定点击事件(点击"删除",删除所选员工信息)
        $("#del").click(function(){
            $("input:checked:not(input[id=‘all‘])").parents("tr").remove();
        });

        //为"修改"绑定点击事件(点击"修改",修改指定ID的员工信息)
        $("#upd").click(function(){
            //获取修改的员工信息
        
            var id = $.trim($("#box2 input[name=‘id‘]").val());    
            var name = $.trim($("#box2 input[name=‘name‘]").val());
            var email = $.trim($("#box2 input[name=‘email‘]").val());    
            var salary = $.trim($("#box2 input[name=‘salary‘]").val());
            //修改员工信息不能为空    
            if(id == "" || name == "" || email == "" || salary == ""){
                alert("修改的信息不能为空!");
                return;
            }
            
            //根据ID修改对应的信息
            var flag = false;
            $("table tr").each(function(){
                //判断id是否等于每行第二个td内的文本, 即id
                if($(this).find("td:eq(1)").text() == id){
                    //进行修改
                    $(this).find("td:eq(2)").text(name);
                    $(this).find("td:eq(3)").text(email);
                    $(this).find("td:eq(4)").text(salary);
                    flag = true;
                    return true;
                }
            })
            if(!flag){
                alert("修改的员工ID不存在!");
            }
        });
            
    })

    
    
</script>
</head>

<body>
    <h2>添加新员工</h2>
    <div id="box1">
        ID:<input type="text" name="id"/>
        姓名:<input type="text" name="name"/>
        邮箱:<input type="text" name="email"/>
        工资:<input type="text" name="salary"/>
        <input type="button" id="add" value="添加"/>
    </div>
    <hr/>
    <table border="1">
        <tr>
            <th>
                <input type="checkbox" id="all"/>
                <!--全选-->
            </th>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>工资</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>1</td>
            <td>宋江</td>
            <td>sj@163.com</td>
            <td>12000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>2</td>
            <td>武松</td>
            <td>ws@163.com</td>
            <td>10500</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>3</td>
            <td>孙二娘</td>
            <td>sen@163.com</td>
            <td>11000</td>
        </tr>
    </table>
    <h4><a href="#" id="del">删除选中</a></h2>

    <hr/>

    <div id="box2">
        ID:<input type="text" name="id"/>
        姓名:<input type="text" name="name"/>
        邮箱:<input type="text" name="email"/>
        工资:<input type="text" name="salary"/>
        <input type="button" id="upd" value="修改"/>
    </div>
</body>
</html>

 

5.2jquery案例2

标签:问题   not   tco   秦皇岛   alert   实现   idt   填充   city   

原文地址:https://www.cnblogs.com/xuwangqi/p/11294424.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!