web前端实验4

最新推荐文章于 2024-09-13 10:46:15 发布

BB4UXYQ

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量161

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/BB4UXYQ/article/details/130323683

版权

本文展示了如何使用Vue和jQuery来实现不同的界面效果和数据操作功能，包括：1)使用Vue创建带有背景色交替和选中状态的表格；2)使用jQuery和Vue实现内容过滤，动态显示匹配输入的内容；3)使用Vue和jQuery实现级联选择框，根据省份选择自动填充城市选项；4)在Vue中添加新数据到表格以及删除表格行的功能。

摘要由CSDN通过智能技术生成

实验4

1.1.使用jquery或vue实现如下界面效果

在这里插入图片描述

提示：
1. 奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
2. 选中行时，设置单选框选中状态
代码

<template>
    <div>
        <table>
            <thead>
                <th></th>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </thead>
            <tr v-for="(item,index) in list" :class="{active:designate===index}" @click="change(index)">
                <td><input type="radio" :value="index" v-model="danxuan"></td>
                <td>{{ item.name }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.address }}</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data(){
        return{
            designate:'',
            danxuan:'',
            list:[
                {name:'张三',sex:'男',address:'四川成都'},
                {name:'李四',sex:'女',address:'四川绵阳'},
                {name:'王五',sex:'男',address:'四川南充'},
                {name:'赵六',sex:'男',address:'四川自贡'},
                {name:'陈勇',sex:'男',address:'四川德阳'},
                {name:'罗梅',sex:'女',address:'四川宜宾'},
            ]
        }
    },
    methods:{
        change(index){
            this.designate=index;
            this.danxuan=index;
        }
    }
}
</script>
<style scoped>
div{
    width: 400px;
    margin: 0 auto;
}
table{
    border:1px solid black;
    border-collapse: collapse;
}

th{
    border:1px solid black;
}
td{
    border:1px solid black;
}
tr:nth-of-type(odd){
    background-color: #FFF38F;
}
tr:nth-of-type(even){
    background-color: #FFFFEE;
}
tr.active{
    background-color: #FF6500;
}
</style>

/*方法2*/
<template>
  <div id="container">
    <tb id="table">
      <tr>
        <th></th>
        <th class="name">
          姓名
        </th>
        <th class="gender">
          性别
        </th>
        <th class="address">
          暂住地
        </th>
      </tr>

      <tr @click="select(1)" :class="{active:index===1}">
        <td>
          <input type="radio" :value="1" v-model="index" name="select">
        </td>
        <td class="name">
          张三
        </td>
        <td class="gender">
          男
        </td>
        <td class="address">
          四川成都
        </td>
      </tr>
      <tr @click="select(2)" :class="{active:index===2}">
        <td>
          <input type="radio" :value="2" v-model="index" name="select">
        </td>
        <td class="name">
          张三
        </td>
        <td class="gender">
          男
        </td>
        <td class="address">
          四川成都
        </td>
      </tr>
      <tr @click="select(3)" :class="{active:index===3}">
        <td>
          <input type="radio" :value="3" v-model="index" name="select">
        </td>
        <td class="name">
          张三
        </td>
        <td class="gender">
          男
        </td>
        <td class="address">
          四川成都
        </td>
      </tr >
      <tr @click="select(4)" :class="{active:index===4}">
        <td>
          <input type="radio" :value="4" v-model="index" name="select">
        </td>
        <td class="name">
          张三
        </td>
        <td class="gender">
          男
        </td>
        <td class="address">
          四川成都
        </td>
      </tr>
      <tr @click="select(5)" :class="{active:index===5}">
        <td>
          <input type="radio" :value="5" v-model="index" name="select">
        </td>
        <td class="name">
          张三
        </td>
        <td class="gender">
          男
        </td>
        <td class="address">
          四川成都
        </td>
      </tr>
      <tr @click="select(6)":class="{active:index===6}">
        <td>
          <input type="radio" :value="6" v-model="index" name="select">
        </td>
        <td class="name">
          张三
        </td>
        <td class="gender">
          男
        </td>
        <td class="address">
          四川成都
        </td>
      </tr>

    </tb>
  </div>
</template>

<style scoped>
/*偶数行样式*/
tr:nth-child(even){
  background-color: #FFF38F;
}
/*奇数行样式*/
tr:nth-child(odd){
  background-color: #FFFFEE;
}
th, td{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 90px;
  height: 30px;
  border: 1px solid black;
}
tr.active{
  background-color: #FF6500;
}
</style>

<script>

export default {
  data () {
    return {
      index:''
    }
  },
  methods:{
    select(index){
      this.index = index;
      alert(this.index)
    }
  }
}
</script>

2. 使用jquery或vue实现内容过滤，效果如下图所示：

在这里插入图片描述

提示：
1. Jquery中提供了filter方法进行过滤，如$(“选择器”).filter(内容过滤器)
2. 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show()

/*方法一*/
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            /*选择器*/
            /*奇数行设置class为odd*/
            $("tbody>tr:odd").addClass("odd");

            /*偶数行设置class为even*/
            $("tbody>tr:even").addClass("even");

            /*选择输入框，添加查询方法，change表格样式*/
            $("input").change(function() {
                $("tbody>tr").hide();//隐藏全部的数据
                /*类似于contain(String str)*/
                /*contain('val')*/
                /*将匹配val的姓名的列样式从hide改变为show*/
                $("tbody>tr").filter(":contains('" + $(this).val() + "')").show();
            });
        })
    </script>
    <style>
        table {
            /* 设置单一边框 */
            border-collapse: collapse;
            width: 400px;
            text-align: center;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
        }
        .even {
            background-color: #FFF38F;
        }
        .odd {
            background-color: #FFFFEE;
        }
        #th2{
            width: 90px;
        }
        #th3{
            width: 90px;
        }
        #th4{
            width: 200px;
        }
    </style>
</head>

<body>
查询：<input type="text" PLACEHOLDER="请输入姓名">
<br>
<br>
<table id = "info">
    <thead id = "infoHead">
    <th id="th2">姓名</th>
    <th id="th3">性别</th>
    <th id="th4">暂住地</th>
    </thead>
    <tbody>
    <tr>
        <td>张山</td>
        <td>男</td>
        <td>浙江宁波</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr>
        <td>找六</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>
    <tr>
        <td>Rain</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>MAXMAN</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>王六</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>李字</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    </tbody>
</table>
</body>
</html>

/*方法二*/
<template>
  <div>
    <div>查询:<input v-model="keyword"></div>
    <div>
      <table>
        <thead>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
        </thead>
        <tr v-for="item in searchlist">
          <td>{{ item.name }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      keyword:'',
      list:[
        {name:"张山",sex:"男",address:"浙江宁波"},
        {name:"李四",sex:"女",address:"浙江杭州"},
        {name:"王五",sex:"男",address:"湖南长沙"},
        {name:"找六",sex:"男",address:"浙江温州"},
        {name:"Rain",sex:"男",address:"浙江杭州"},
        {name:"MAXMAX",sex:"女",address:"浙江杭州"},
        {name:"王六",sex:"男",address:"浙江杭州"},
        {name:"李字",sex:"女",address:"浙江杭州"},
        {name:"李四",sex:"男",address:"湖南长沙"},
      ]
    }
  },
  methods:{

  },
  computed:{
    searchlist(){
      return this.list.filter((item)=>{
        return item.name.indexOf(this.keyword)!==-1
            ||item.sex.indexOf(this.keyword)!==-1
            ||item.address.indexOf(this.keyword)!==-1;
      })
    }
  }
}
</script>
<style scoped>
div{
  width: 400px;
  margin: 0 auto;
}
table{
  border:1px solid black;
  border-collapse: collapse;
}

th{
  border:1px solid black;
}
td{
  border:1px solid black;
  text-align: center;
}
tr:nth-of-type(odd){
  background-color: #FFF38F;
}
tr:nth-of-type(even){
  background-color: #FFFFEE;
}
th:nth-child(3){
  width: 90px;
}
</style>

3. 使用 JQuery或vue 实现级联选择框，界面实现效果参考如下图。

在这里插入图片描述

/*方法一*/
<template>
    <div> 
        <select v-model="province">
            <option :value="item" v-for="(item,index) in area">{{ item.province }}</option>
        </select>
        <select v-model="city">
            <option :value="item" v-for="(item,index) in province.city">{{item}}</option>
        </select>
    </div>
</template>
<script>
export default {
    data(){
        return{
            province:{"province":"请选择","city":["请选择"]},
            city:'请选择',
            area:[
            {"province":"请选择","city":["请选择"]},
            {
                "province":"河北省",
                "city":[
                "石家庄",
                "邯郸",
                "唐山",
                "张家口",
                "廊坊",
                ]
            },
            {
                "province":"辽宁省",
                "city":[
                "沈阳市",
                "大连市",
                "鞍山市",
                "抚顺市",
                "本溪市"
                ]
            },

            {
                "province":"山东省",
                "city":[
                "济南市",
                "青岛市",
                "淄博市",
                "枣庄市",
                "东营市"
                ]
            },
            ]
        }
    },
    methods:{
        set(item){
            this.list.push(item)
        }
    }
}
</script>

/*方法二*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-3.1.1.min.js"></script>

</head>
<body>
<select id="provinces">
    <option value="0">请选择</option>
    <option value="1">河北省</option>
    <option value="2">辽宁省</option>
    <option value="3">山东省</option>
</select>
<select id="cities">
    <option value="0">请选择</option>
</select>



<script>

    var cities = ["请选择"]
    var cities1 = ["请选择","石家庄","邯郸","唐山","张家口","廊坊"];
    var cities2 = ["请选择","沈阳市","大连市","鞍山市","抚顺市","本溪市"];
    var cities3 = ["请选择","济南市","青岛市","淄博市","枣庄市","东营市"];
    $("#provinces").change(function(){
        /*清空cities*/
        $("#cities").empty();
        /*获取当前的省对应的value，也就是cities数组的index*/
        var provinceValue=$("#provinces").val();
        if (provinceValue == 0){
            /*遍历cities*/
            for( var i=0;i<cities.length;i++){
                /*添加option标签，将数组中的城市的值插入到html代码内*/
                var newoption="<option>"+cities[i]+"</option>";
                $("#cities").append(newoption);
            }
        }else if (provinceValue == 1){
            /*遍历cities*/
            for( var i=0;i<cities1.length;i++){
                /*添加option标签，将数组中的城市的值插入到html代码内*/
                var newoption="<option>"+cities1[i]+"</option>";
                $("#cities").append(newoption);
            }
        }else if (provinceValue == 2){
            /*遍历cities*/
            for( var i=0;i<cities2.length;i++){
                /*添加option标签，将数组中的城市的值插入到html代码内*/
                var newoption="<option>"+cities2[i]+"</option>";
                $("#cities").append(newoption);
            }
        }else if (provinceValue == 3){
            /*遍历cities*/
            for( var i=0;i<cities3.length;i++){
                /*添加option标签，将数组中的城市的值插入到html代码内*/
                var newoption="<option>"+cities3[i]+"</option>";
                $("#cities").append(newoption);
            }
        }
    });

</script>

</body>

</html>

4. 使用Jquery或vue实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。

在这里插入图片描述

代码

/*方法1*/
<template>
    <div class="d1">
        <div >
            <h2>添加新员工</h2>
        </div>
        <div class="d2">
            name:<input v-model="newlist.name">
            email:<input v-model="newlist.email">
            salary:<input v-model="newlist.salary">
            <div>
                <input type="submit" @click="add">
            </div>
        </div>
        <div class="d3">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th></th>
                </tr>
                <tr v-for="item in list">
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.salary}}</td>
                    <td>
                    <a href="javascript:void(0);" @click="del(item)">Delete</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            newlist:{
                name:'',
                email:'',
                salary:'',
            },
            list:[
                {name:"Tom",email:"tom@tom.com",salary:"5000"},
                {name:"Jerry",email:"jerry@sohu.com",salary:"8000"},
                {name:"Bob",email:"bob@tom.com",salary:"10000"}
            ]
        }
    },
    methods:{
        add(){
            this.list.push(this.newlist)
        },
        del(item){
            var index=this.list.indexOf(item)
            this.list.splice(index,1)
        }
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.d1{
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
.d2{
    
    height: 100px;
    border-bottom: 1px solid black;
    
}
.d3{
    padding-left:250px;
}
table{
    border:1px solid black;
    border-collapse: collapse;
}

th{
    border:1px solid black;
}
td{
    border:1px solid black;
    text-align: center;
}
</style>

<!DOCTYPE html>

<html lang="en">



/*方法2*/
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>employee</title>
    <script src="js/jquery-3.1.1.min.js"></script>

    <script>
        /*页面载入时执行方法*/
        $(document).ready(function(){
            $("#submitButton").click(function(){
                console.log(1);
                var name=$("#name").val();
                var email=$("#email").val();
                var salary=$("#salary").val();

                $("#table").append("<tr>"+
                    "<td>"+name+"</td>"+
                    "<td>"+email+"</td>"+
                    "<td>"+salary+"</td>"+
                    "<td>"+"<span> Delete </span>"+"</td>"+
                    +"</tr>");

                $("span").click(function(){
                    $(this).parent().parent().remove();
                });
            });
        });

    </script>
    <style>
        #title {
            text-align: center;
            margin: 20px;
        }

        #div1 {
            text-align: center;
            margin: 20px auto;
        }

        #button {
            text-align: center;
            margin: 20px auto;
        }

        span{
            text-decoration:underline blue;
            color: blue;
        }

        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        td {
            border: #bab6aa solid 2px;
            width: 90px;
            text-align: center;
        }

        #container1 {
            margin: 20px auto;
        }
    </style>

</head>
<body>
<div id="container1">
    <div id="title">添加新员工</div>
    <DIV id="div1">
        name:<input id="name" type="text">
        email:<input id="email" type="text">
        salary:<input id="salary" type="text">
    </DIV>
    <div id="button">
        <input id="submitButton" type="button" value="Submit">
    </div>
    <br>
    <hr>
    <table id="table">
        <tr #id="tr1">
            <td>Name</td>
            <td>Email</td>
            <td>salary</td>
            <td></td>
        </tr>
    </table>

</div>
</body>

</html>