jquery小练习 单选多选 二级联动 员工信息的添加与删除

单选多选与全选

就是点击按钮从左边把内容一道右边

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript">
        $(function(){
            $("#button1").click(function(){
                $("#sel1 option:selected").each(function(){
                    $("#sel2").append($(this));
                    return false;
                    
                })    
            })
            
            
            $("#button3").click(function(){
                $("#sel1 option:selected").each(function(){
                    $("#sel2").append($(this));
                    
                })    
            })
            
            $("#button2").click(function(){
                $("#sel1 option").each(function(){
                    $("#sel2").append($(this));
                    
                })    
            })
            
        })
        
    </script>
    <body>
        <select style="height: 100px;" multiple="multiple" id="sel1">
            <option>河南</option>
            <option>青岛</option>
            <option>北京</option>
            <option>山东</option>
            <option>南阳</option>
        </select>
        <button id="button1">单选</button>
        <button id="button3">多选</button>
        <button id="button2">全选</button>
        <select multiple="multiple" style="height: 100px;" id="sel2">
            
        </select>
        
    </body>
</html>

二级联动

意思是根据左边选择的option的不同，会有不同的右边选项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript">
        $(function (){
            $("#sel1").change(function(){
                var array=[["---请选择---"],["qqqq","qqq","qq","q","qqqqq"],["wwww","www","ww","w"],["eee","ee","e"],["rrr","rr","r"]];
                var $a=$("#sel1 option:selected");
                var $i=0;
                $("#sel2 option").each(function(){
                    $(this).remove();
                })
                    
                $("#sel1 option").each(function(){
                    if($(this).text()==$a.text()){
                        $.each(array, function(j) {
                            if(array[$i][j]!=null)
                            $("#sel2").append("<option>"+array[$i][j]+"</option>");
                            
                            
                        });
                    }
                    $i++;
                })
                
            })
            
        })
        
        
    </script>
    <body>
        <select id="sel1">
            <option>---请选择---</option>
            <option>北京市</option>
            <option>河南省</option>
            <option>河北省</option>
            <option>山东省</option>
        </select>
        
        <select id="sel2">
            
        </select>
        
    </body>
</html>

员工信息的添加与删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
    
    $(function(){
        $("#addEmpButton").click(function(){
              $("tbody").append("<tr><td>"+$("#name").val()+"</td><td>"+$("#email").val()+"</td><td>"+$("#salary").val()+"</td><td><a href=‘#‘>删除</a></td></tr>").find("a").click(function(){
                  return shanchu(this)
              });
        $("#name").val("");
         $("#email").val("");
         $("#salary").val("");
        })
        
        $("tbody a").click(function(){
        return shanchu(this);
    })
    
    
    
    function shanchu(a){
            var $a=$(a);
            a.parentNode.parentNode.remove();
            
            
            
        }
        
        
        
    })
    
    
    
</script>
</head>
<body>

<center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name"/>&nbsp;&nbsp; email: <input type="text"
            name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
            name="salary" id="salary" /> <br> <br>
        <button id="addEmpButton" value="abc">Submit</button>
        <br> <br>
        <hr>
        <br> <br>
        
        
        
        
        <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>[email protected]</td>
                    <td>5000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>
                        Jerry
                    </td>
                    <td>[email protected]</td>
                    <td>8000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>[email protected]</td>
                    <td>10000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>

</body>
</html>

原文地址：https://www.cnblogs.com/wxldlxt/p/10921825.html

时间： 2024-10-07 23:44:20

jquery小练习 单选多选 二级联动 员工信息的添加与删除的相关文章

jQuery实例的ajax应用之二级联动

jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动 数据库表设计 csj_trade id int(11) auto_increment tname varchar(100) tradeType int(11) 其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类;不为0,而是某个数字的时候,则这个数字表示其父级的id. (1)主页面http://rl.82676666.com ——

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

jQuery动态绑定事件（简单模拟二级联动效果）

绑定事件:$("#leyangjun").bind("change",function(){ jquery 给标签赋值:$('#leyangjun').text('好一朵美丽的茉莉花'); 清空表单值:$("#leyangjun").empty(); radio取值:$("input[name='radioName'][checked]").val(); <!DOCTYPE html PUBLIC "-//W3

jquery实现select二级联动

jquery实现一个简单的select二级联动菜单,代码如下 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery 二级联动</title> 6 <style> 7 .city{ 8 display: none;; 9 } 10 .city_first { 11 display: block; 12 }

Query实例的ajax应用之二级联动的后台是采用php来做的

jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment          tname varchar(100)tradeType int(11) 其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类:不为0,而是某个数字的时候,则这个数字表示其父级的id.(1)主页面 <script type="t

(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术   程序开发   数据库   小类: 实现的效果就是当选择大类时,小类下拉框里的选项内容也随着改变.实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类

（实用篇）jQuery二级联动代码

jquery二级联动城市代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

初识安卓小程序(开关灯——单选多选按钮控制)

如图: 点击单选按钮"开灯",多选按钮就会显示"关灯"且方块里有对勾:反之,点多选按钮,单选按钮也自动改变. 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"bulb",把两张图片:开灯与关灯状态的图片放入"drawable-"随意一个文件夹下 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLay

vba实现excel二级联动多选功能

要求 二级菜单需要根据一级菜单的不同变换内容 二级菜单为多选框,选择后,以逗号分隔显示在单元格内 实现 先上效果图,如下图图一所示,这里面是excel2013版本 图一效果图 数据源放在了sheet2里面,数据源如下图二所示.这里,使用第一行为第一级即H列的数据源[H列加数据验证为序列,源为sheet2的第一列,度娘有很详细的步骤]:I列根据H列的不同,加载对应列为多选的选项. 图二数据源 在编写代码的时候,一定要记得先加控件,步骤图如下图三所示,图四是控件的属性图,另外,请先确定启用了宏和开发