web实验四

已于 2023-04-19 16:37:58 修改
阅读量82 收藏
点赞数
文章标签： 前端 html javascript
于 2023-04-19 16:29:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56993984/article/details/130246792
版权

实验目的及要求：

  1. 掌握Jquery页面初始化方法
  2. 掌握Jquery的选择器的基本使用
  3. 掌握Jquery对DOM 的基本操作
  4. 掌握vue的基础用法

实验内容：

说明：所有实验内容可选择jquery或vue的任一项技术路线实现

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

提示：

  • 奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
  • 选中行时，设置单选框选中状态
<!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">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th></th>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </tr>
        <tr>
            <td><input type="radio" name="" id=""></td>
            <td>张三</td>
            <td>男</td>
            <td>四川成都</td>
        </tr>
        <tr>
            <td><input type="radio" name="" id=""></td>
            <td>李四</td>
            <td>女</td>
            <td>四川绵阳</td>
        </tr>
        <tr>
            <td><input type="radio" name="" id=""></td>
            <td>王五</td>
            <td>男</td>
            <td>四川南充</td>
        </tr>
        <tr>
            <td><input type="radio" name="" id=""></td>
            <td>赵六</td>
            <td>男</td>
            <td>四川自贡</td>
        </tr>
        <tr>
            <td><input type="radio" name="" id=""></td>
            <td>陈勇</td>
            <td>男</td>
            <td>四川德阳</td>
        </tr>
        <tr>
            <td><input type="radio" name="" id=""></td>
            <td>罗梅</td>
            <td>女</td>
            <td>四川宜宾</td>
        </tr>
    </table>
    <script src="./实验六/js/jquery-3.6.3.min.js"></script>

    <script>
        $('table tr:odd').css("background-color", "#FFF38F")
        $('table tr:even').css("background-color", "#FFFFEE")
        $(':radio').on("click", function() {
            $(this).parent().parent().css("background-color", "#FF6500")
        })


    </script>
</body>

</html>

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

提示：

  • Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)
  • 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）
<!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">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            border: 1px solid #000;
        }
        #search {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="search">查询：<input type="text"></div>
   
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </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>赵六</td>
            <td>男</td>
            <td>浙江温州</td>
        </tr>
        <tr>
            <td>Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td>王六</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
    </table>
    <script src="./实验六/js/jquery-3.6.3.min.js"></script>

    <script>
        $('table tr:odd').css("background-color", "#FFF38F")
        $('table tr:even').css("background-color", "#FFFFEE")

        $("#search input").change(function() {
            $("tr:not(:first)").hide()
            $("table tr").filter(":contains(" + $(this).val() + ")").show()
        })
    </script>
</body>

</html>

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

<!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">
    <title>Document</title>

</head>

<body>
    <form action="">
        <select id="province">
            <option>请选择...</option>
            <option>河北省</option>
            <option>湖北省</option>
            <option>四川省</option>
        </select>
        <select id="city">
            <option>请选择...</option>
        </select>
    </form>

    <script src="./实验六/js/jquery-3.6.3.min.js"></script>
    <script>
        $("#province").change(function () {
            let arrCity = [[],
                ["石家庄", "邯郸", "唐山", "张家口"],
                ["武汉", "恩施"],
                ["成都", "绵阳", "泸州"]
            ]

            let city = document.getElementById("city")
            let cityChildNodes = city.childNodes;
            for( let i=2; i < cityChildNodes.length; ) {
                city.removeChild(cityChildNodes[i])
            }

            let province = document.getElementById("province")
            let index = province.selectedIndex
            for( j=0; j<arrCity[index].length; j++) {
                $("#city").append("<option>" +arrCity[index][j]+ "</option>")
            }
        })
    </script>

</body>

</html>

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

<!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">
    <title>Document</title>
    <style>
        .addFrom {
            width: 800px;
            height: 150px;
            margin: 0 auto;
            text-align: center;
            border-bottom: 1px solid #000;
        }
        .title {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }
        .submit input{
            margin: 20px auto;
        }
        table {
            width: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border-collapse: collapse;
            text-align: center;
            line-height: 30px;

        }
        th, td{
            border: 1px solid #000;
        }

    </style>
</head>
<body>
    <div class="addFrom">
        <div class="title">添加新员工</div>
        name: <input type="text" id="name">&nbsp;&nbsp;
        email: <input type="text" id="email">&nbsp;&nbsp;
        salary: <input type="text" id="salary">

        <div class="submit">
            <input type="button" value="Submit" id="submit">
        </div>
    </div>

    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </table>

    <script src="./实验六/js/jquery-3.6.3.min.js"></script>
    <script>
        $("#submit").click(function() {
            let name = $("#name").val()
            let email = $("#email").val()
            let salary = $("#salary").val()
            $("table").append(`
                <tr>
                    <td>${name}</td>
                    <td>${email}</td>
                    <td>${salary}</td>
                    <td><a href="#" id="del" onclick="del(this)">Delete</a></td>
                </tr>
            `)
        })
        $(document).on("click", "#del", function() {
            $(this).parent().parent().remove()
        })

        // function del(row) {
        //     $(row).parent().parent().remove()
        // }

        //为啥子不行！！！！
        // $("#del").click(function() {
        //     $(this).parent().parent().remove()
        // })

    </script>
</body>
</html>

好多头发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web实验四 CSS应用综合实验 5月19日
Yutouxn0的博客
05-22 605
【实验目的】 1．掌握CSS的图文混排。 2．掌握在网页上应用CSS的方法。 3. 掌握iframe的使用。 【实验重点及难点】 掌握CSS+DIV布局。 【实验内容】 1、制作下图所示的图文混排页面。 <!DOCTYPE html> <html> <head> <title>背影</title> <style type="text/css"> #all{width: 800px;height:730p
web实验四 Servlet的应用
qq_48116514的博客
07-05 1530
1)熟悉servlet的创建部署运行； 2)掌握通过表单向servlet提交数据的方式； 3)掌握通过超链接访问servlet的方式； 4)掌握使用gservlet实现重定向和转发。 二、实验内容 1)实验1：使用servlet分解单词，实验要求如下：用户在JSP页面输入英文句子提交给servlet，使用他可以统计出英文句子中的单词数目。具体来说创建一个inputWord.jsp页面用于提供一个表单，用户使用该表单中的文本区输入英文句子中的单词；编写一个servlet类，该类可以分解出英文句子...
WEB实验四2021.4.27
weixin_47786301的博客
04-25 1691
WEB实验四 实验目的及要求： （1） 握Jquery页面初始化方法 （2） 掌握Jquery的选择器的基本使用 （3） 掌握Jquery对DOM 的基本操作 实验内容： 1.使用jquery实现如下界面效果： 提示：  奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500  选中行时，设置单选框选中状态  运行截图  代码： <!DOCTYPE html> <html lang="en"> <head> <meta
Java Web实验四：Servlet应用开发
jianguosongzi的博客
04-03 788
1. 编写一个登录页面，根据登录验证结果，重定向到登录成功页面和登录失败页面；2. 学会使用Servlet的跳转方法实现重定向；2. 在Servlet中获取应用程序配置参数。1. 学会使用Servlet获取表单数据；3. 学会配置和获取应用初始化参数的方法。实验四 Servlet应用开发。
java web实验报告_JavaWeb实验报告
weixin_28712661的博客
02-21 5271
实验一开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法；4、掌握在Tomcat中手工创建可执行程序的方法；二、实验内容及要求本次实验内容分为两部分：1、验证部分1)通过手动的方式在Tomcat中建立工程my，在该工程...
java web实验_javaweb实验报告
weixin_32188111的博客
02-12 3688
javaweb实验报告 甘肃政法学院本科生实验报告(一)姓名:学院:计算机科学学院专业: 计算机科学与技术班级实验课程名称:实验日期:2012 年 04 月 9 日指导教师及职称实验成绩:开课时间：2012 学年 二 学期甘肃政法学院实验管理中心印制实验题目 Java Web 项目开发环境搭建于简单开发 Jsp 指令标记与动作标记 Jsp 内置对象 小组合作 否姓名 班级 学 号一、实验目的1、 ...
合工大JAVA实验四web_合工大JAVA实验报告.doc
weixin_39564187的博客
02-27 1382
专业整理WORD完美格式《Java技术》实验报告实验一： 2016 年10 月 11 日学院计算机与信息学院专业班级姓名成绩课程名称Java技术实验项目名 称实验一 Java开发环境的安装与配置指导教师教师评语教师签名：年 月 日一、实验目的掌握JDK的安装步骤(有条件的话可以...
网络安全实验——web安全
weixin_58628068的博客
05-18 3188
XSS（Cross-Site Scripting）是一种常见的Web应用程序漏洞，攻击者可以通过注入恶意脚本来获取用户的敏感信息或者控制用户的账户。攻击者可以通过在输入框、URL参数等地方注入恶意脚本来实现XSS攻击。为了防止XSS攻击，应该对用户提交的数据进行过滤和转义，避免将用户输入的内容作为HTML或JavaScript代码直接输出到页面上。在盗取rookie（一个虚拟人物）的实验中，攻击者通过在评论中注入恶意脚本，来实现对rookie账户的控制。
web实验超详细步骤
qq_56628318的博客
05-31 2213
web网页详细制作
Java与web实验报告,Java Web实验报告一
weixin_33226816的博客
03-10 1128
实验一 开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法； 4、掌握在Tomcat中手工创建可执行程序的方法；5、加强对servlet的生命周期的理解；掌握servlet程序的实现方法。 二、实验内容及要求本次实验...
西北农林科技大学web实验四
05-21
西北农林科技大学 Web 实验四 本实验的主要目标是培养学生综合应用 HTML、CSS 和 JavaScript 的能力，掌握 CSS 网页布局方法和 JavaScript 程序设计方法。通过完成实验四，可以提高学生的 Web 开发能力和问题解决...
Web实验报告.doc
11-28
* ASP.NET 是微软公司推出的一个基于Web 的应用程序开发框架，它允许开发人员使用.NET Framework 创建动态网页。 * ASP.NET 使用C#或VB.NET等语言开发，支持HTML、CSS、JavaScript等技术。 * ASP.NET 应用程序可以...
Web实验报告四.doc
03-06
在本实验报告“Web实验报告四.doc”中，主要涵盖了Web开发中的关键技术和概念，特别是针对青岛科技大学Web考试的相关知识。实验重点在于理解和应用MVC（Model-View-Controller）设计模式，以及JSP+Servlet+JavaBean...
web实验四 数据库操作
04-07
熟练掌握加载JDBC驱动程序 2. 熟练掌握连接MySQL数据库 3. 熟练掌握添加、更新、删除记录 4. 熟练掌握获得指定记录 5. 熟练掌握使用PreparedStatement进行数据库操作
web实验指导书学生.doc
11-19
实验四：JSP 基础知识 在实验四中，学生将学习 JSP 的基本知识，包括如何使用 JSP 实现网页的后端逻辑和数据交互。学生还将学习如何使用 JSP 实现网页的会话管理和安全验证。 知识点： * JSP 基础知识 * 网页后端...
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 352
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
更新商品前端接口编写
weixin_55639995的博客
07-12 386
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 691
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 319
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值