实验4

最新推荐文章于 2023-04-21 17:55:51 发布
最新推荐文章于 2023-04-21 17:55:51 发布
阅读量70 收藏
点赞数
分类专栏： web实验 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45873798/article/details/116198436
版权

实验4

一.网页1

1.html、css

<!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>
    <script src="./jquery-3.6.0.min.js"></script>
    <style>
        #div1 {
            width: 800px;
            height: 210px;
            margin: 100px auto;
        }
        
        table {
            border: 1px solid #000;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 1px solid #000;
            width: 200px;
            height: 30px;
            margin: 0;
            padding: 0;
            text-align: center;
            font-weight: 10%;
        }
        
        .td01 {
            width: 100px;
        }
        
        .odd {
            background-color: #f5f3a2;
        }
        
        .even {
            background: #FFFFEE;
        }
        
        .one {
            background: #FF6500;
        }
    </style>
</head>

<body>
    <div id="div1">
        <table>
            <tr>
                <td class="td01"></td>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
            <tr class="odd">
                <td class="td01"><input type="radio" name="box"></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr class="even">
                <td class="td01"><input type="radio" name="box"></td>
                <td>李四</td>
                <td>女</td>
                <td>四川绵阳</td>
            </tr>
            <tr class="odd">
                <td class="td01"><input type="radio" name="box"></td>
                <td>王五</td>
                <td>男</td>
                <td>四川南充</td>
            </tr>
            <tr class="even">
                <td class="td01"><input type="radio" name="box"></td>
                <td>赵六</td>
                <td>男</td>
                <td>四川自贡</td>
            </tr>
            <tr class="odd">
                <td class="td01"><input type="radio" name="box"></td>
                <td>陈勇</td>
                <td>男</td>
                <td>四川德阳</td>
            </tr>
            <tr class="even">
                <td class="td01"><input type="radio" name="box"></td>
                <td>罗梅</td>
                <td>女</td>
                <td>四川宜宾</td>
            </tr>

        </table>
    </div>
    <script src="./js1.js"></script>
</body>

</html>

2.js

$(function() {
    $("input[type='radio']").click(function() {
        $("input[type='radio']:checked").parents("tr").addClass("one");
        $("input:not(:checked)").parents("tr").removeClass("one");
    });
})

界面展示：

二.网页2

1.html、css

<!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>
    <script src="./jquery-3.6.0.min.js"></script>
    <style>
        #div1 {
            width: 500px;
            height: 50px;
            margin-left: 465px;
            margin-top: 50px;
        }
        
        #div2 {
            width: 800px;
            height: 210px;
            margin: 10px auto;
        }
        
        input {
            height: 20px;
            width: 190px;
            border: 2px solid #000;
            margin-left: 15px;
        }
        
        button {
            height: 30px;
            margin-left: 10px;
        }
        
        table {
            border: 1px solid #000;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 1px solid #000;
            width: 200px;
            height: 30px;
            margin: 0;
            padding: 0;
            text-align: center;
            font-weight: 10%;
        }
        
        .sex {
            width: 90px;
        }
        
        .odd {
            background-color: #f5f3a2;
        }
        
        .even {
            background: #FFFFEE;
        }
    </style>
</head>

<body>
    <div id="div1">
        查询:<input type="text"><button>查询</button>
    </div>
    <div id="div2">
        <table>
            <tr>
                <th>姓名</th>
                <th class="sex">性别</th>
                <th>暂住地</th>
            </tr>
            <tr class="odd">

                <td>张三</td>
                <td class="sex">男</td>
                <td>浙江宁波</td>
            </tr>
            <tr class="even">

                <td>李四</td>
                <td class="sex">女</td>
                <td>浙江杭州</td>
            </tr>
            <tr class="odd">

                <td>王五</td>
                <td class="sex">男</td>
                <td>湖南长沙</td>
            </tr>
            <tr class="even">

                <td>赵六</td>
                <td class="sex">男</td>
                <td>浙江温州</td>
            </tr>
            <tr class="odd">

                <td>Rain</td>
                <td class="sex">男</td>
                <td>浙江杭州</td>
            </tr>
            <tr class="even">

                <td>MAXMAN</td>
                <td class="sex">女</td>
                <td>浙江杭州</td>
            </tr>
            <tr class="odd">

                <td>王六</td>
                <td class="sex">男</td>
                <td>浙江杭州</td>
            </tr>
            <tr class="even">

                <td>李字</td>
                <td class="sex">女</td>
                <td>浙江杭州</td>
            </tr>
            <tr class="odd">

                <td>李四</td>
                <td class="sex">男</td>
                <td>湖南长沙</td>
            </tr>

        </table>
    </div>
    <script src="./js2.js"></script>
</body>

</html>

2.js

$(function() {
    $("button").click(function() {
        var text = $("input").val();
        var array = $("td:contains(" + text + ")");
        array.parents("tr").addClass("one");
        $("tr:not('.one')").addClass("two");
        $(".two").remove();
    })
})

界面展示：

三.网页3

1.html、css

<!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>
    <script src="./jquery-3.6.0.min.js"></script>
</head>

<body>
    <select name="" id="one">
        <option value="0" class="op">请选择--</option>
        <option value="1" class="op">河北省</option>
        <option value="2" class="op">辽宁省</option>
        <option value="3" class="op">山东省</option>    
    </select>
    <select name="" id="two">
        <option value="">请选择--</option> 
    </select>
    <script src="./js3.js"></script>
</body>

</html>

2.js

$(function() {
    $("#one").change(function() {
        var val = $("#one .op:checked")[0].value;
        var text1 = "<option class='insert'>石家庄</option><option class='insert'>邯郸</option><option class='insert'>唐山</option><option class='insert'>张家口</option><option class='insert'>廊坊</option>";
        var text2 = "<option class='insert'>沈阳</option><option class='insert'>铁岭</option><option class='insert'>葫芦岛</option><option class='insert'>本溪</option>";
        var text3 = "<option class='insert'>青岛</option><option class='insert'>济宁</option><option class='insert'>烟台</option>";
        if (val == 1) {
            $("#two option").remove(".insert");
            $("#two").append(text1);
        } else if (val == 2) {
            $("#two option").remove(".insert");
            $("#two").append(text2);
        } else if (val == 3) {
            $("#two option").remove(".insert");
            $("#two").append(text3);
        }
    })
})

界面展示：

四.网页4

1.html、css

<!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>
    <script src="./jquery-3.6.0.min.js"></script>
    <style>
        #div1 {
            width: 700px;
            height: 500px;
            margin: 100px auto;
        }
        
        #div2 {
            width: 700px;
            height: 150px;
        }
        
        #div3 {
            width: 700px;
            height: 350px;
        }
        
        .center {
            text-align: center;
        }
        
        h1 {
            text-align: center;
            font-size: 20px;
        }
        
        input {
            height: 20px;
            border: 1px solid rgb(86, 160, 230);
        }
        
        button {
            width: 80px;
            height: 30px;
            font-size: 18px;
            margin-top: 20px;
            border-radius: 5px;
            border-color: rgb(60, 149, 201);
        }
        
        hr {
            border: 1px solid rgb(168, 167, 167);
        }
        
        table {
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 50px auto;
        }
        
        th,
        td {
            border: 1px solid #000;
            width: 70px;
            height: 40px;
            margin: 0;
            padding: 0;
            text-align: center;
            font-weight: 10%;
        }
        
        .email {
            width: 150px;
        }
        
        span {
            cursor: pointer;
            text-decoration: underline;
            color: blue;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <h1>添加新员工</h1>
            <div class="center">
                name: <input type="text" id="name"> &nbsp; email: <input type="text" id="email"> &nbsp; salary: <input type="text" id="salary">
            </div>
            <div class="center">
                <button>Submit</button>
            </div>
        </div>
        <div id="div3">
            <hr>
            <table>
                <tr>
                    <th>Name</th>
                    <th class="email">Email</th>
                    <th>Salary</th>
                    <th></th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td class="email">tom@tom.com</td>
                    <td>5000</td>
                    <td><span>Delete</span></td>
                </tr>
                <tr>
                    <td>Jerry</td>
                    <td class="email">jerry@sohu.com</td>
                    <td>8000</td>
                    <td><span>Delete</span></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td class="email">bob@tom.com</td>
                    <td>10000</td>
                    <td><span>Delete</span></td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./js4.js"></script>
</body>

</html>

2.js

$(function() {
    $("button").click(function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var salary = $("#salary").val();
        var line = "<tr> <td> " + name + "</td><td class ='email'>" + email + " </td> <td> " + salary + " </td><td><span>Delete</span></td></tr>"
        $("tr:last").after(line);

    })

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

})

界面展示：

Key_F
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实验4 RDD编程初级实践
WangyiboH的博客
05-26 2645
一、实验目的 （1）熟悉Spark的RDD基本操作及键值对操作； （2）熟悉使用RDD编程解决实际具体问题的方法。 二、实验平台 操作系统：Ubuntu16.04 Spark版本：2.1.0 三、实验内容和要求 实验内容与完成情况： 1.spark-shell交互式编程 （1）该系总共有多少学生； （2）该系共开设来多少门课程 （3）Tom同学的总成绩平均分是多少 （4）求每名同学的选修的课程门数； 具体如下 （5）该系DataBase课程共有多少人选修； （.
实验4：Linux下C语言编程
m0_48385518的博客
05-08 4434
1.实验目的 掌握LinuxC语言开发工具的安装。 掌握VI编辑器的使用 掌握Linux下C语言的编译方法 了解Linux下C语言程序的调试方法 2.实验环境 （1）一台已经安装好的Window系统的计算机。 （2）安装好的CentOS虚拟机。 3.实验内容 Linux C语言程序的编写、编译与调试 4.实验步骤 安装Linux下C语言开发工具（yum -y groupinstall “Development tools”） 安装vi编辑器的增强版编辑器vim（yum -..
计算机网络实验报告 实验4 TCP协议分析
Jellyfishwuan的博客
04-21 9217
TCP为了保证报文传输的可靠，就给每个包一个序号，同时序号也保证了传送到接收端实体的包的按序接收。如果发送端实体在合理的往返时延（RTT）内未收到确认，那么对应的数据（假设丢失了）将会被重传。校验和：由发送端填充，接收端对报文段执行CRC（循环冗余校验，利用除法及余数的原理来作错误侦测）算法以检验TCP报文段在传输中是否损坏。TCP是面向连接的、在不可靠的互联网络上提供可靠的端到端通信。紧急指针：URG校验位为1才有作用，紧急指针为50，就是1-50个字节是要紧急处理的。窗口：用来记录缓存是多少字节的。
实验4 NoSQL和关系数据库的操作比较
热门推荐
Alicia_LX的博客
11-21 1万+
实验4NoSQL和关系数据库的操作比较 1.实验目的 （1）理解四种数据库(MySQL、HBase、Redis和MongoDB)的概念以及不同点； （2）熟练使用四种数据库操作常用的Shell命令； （3）熟悉四种数据库操作常用的Java API。 2.实验平台 （1）操作系统：Linux（建议Ubuntu16.04或Ubuntu18.04）； （2）Hadoop版本：3.1.3； （3）MySQL版本：5.6； （4）HBase版本：2.2.2； （5）Redis版本：5.0.5； .
数电实验4：彩灯控制器设计
Jacksaj的博客
03-30 3222
西南交大数电实验————《数字电路与计算机组成原理》
【数据库】实验4：触发器实验
Coco416的博客
11-21 2838
触发器类似于约束，但比约束灵活，可以实施更为复杂的检查和操作，具有更精细和更强大的数据控制能力。after是先完成数据的增删改，再触发，触发的语句晚于监视的增删改操作，无法影响前面的增删改动作；after是先完成数据的增删改，再触发，触发的语句晚于监视的增删改操作，无法影响前面的增删改动作；能够理解不同类型触发器的作用和执行原理，验证触发器的有效性。before是先完成触发，再增删改，触发的语句先于监视的增删改，这样就可以对new进行修改了。before是先完成触发，再增删改，触发的语句先于监视的增删改。
java实验及答案_JAVA实验4-1答案
weixin_28881787的博客
02-16 9580
GDOU-B-11-112广东海洋大学学生实验报告书(学生用表)实验名称 学院(系) 学生姓名实验四(1). 类与对象(第1部分) 信息学院 彭德权专业Java程序设计与开发课程名称 课程号 16232204技术 计算机科学与技术钟海楼 04019班级 计科1131 2015年实验日期9月24日学号 201311621124 实验地点一、实验目的(1)学习使用Java中的类来封装对象的属性和功能；...
数据库原理及应用实验报告-实验4-SQL的视图
cangzhexingxing的博客
07-01 3978
熟悉SQL支持的有关视图的操作，能够熟练使用SQL语句来创建需要的视图，对视图进行查询和删除视图。
数据库实验4：数据库的简单查询和连接查询实验
weixin_43730105的博客
05-26 1万+
使学生掌握 SQL Server 查询分析器的使用方法，加深对 SQL 和 Transact-SQL 语言的查询语句的理解。熟练掌握简单表的数据查询、数据排序和数据连接查询的操作方法。
汇编语言实验4：分支程序题目设计
Aslixzhou
11-09 6423
汇编语言实验：分支程序结构设计 >1. 根据输入的数字1－7，分别显示相应的英文星期名，如果输入其他字符，则提示错误输出，程序关闭 >2. 判断输入字符：如果是大写字母，则输出对应小写字母；如果是小写字母，则输出对应大写字母；如果是数字，则提示输出数字，否则，输出错误信息，程序关闭。 >3. 根据x计算y值：如果x
多思计算机组成原理实验4.docx
07-27
【计算机组成原理实验4】是针对微程序控制器设计的一个实践环节，旨在帮助学生深入理解微程序控制器的工作原理、微指令和微程序的概念，以及如何根据指令操作码读取微程序的过程。实验要求学生具备一定的电路知识，...
实验4 数据库备份与恢复实验 (2).docx
11-19
实验4 数据库备份与恢复实验 数据库备份与恢复是数据库管理系统中非常重要的一部分。实验4 数据库备份与恢复实验旨在让学生掌握数据库备份与恢复的操作方法。 知识点1: 数据库备份 数据库备份是指将数据库中的...
国开操作系统实验4文件管理实验
05-31
本实验“国开操作系统实验4文件管理实验”聚焦于这一主题，旨在让学生深入理解文件系统的运作机制。 实验内容可能包括以下几个方面： 1. **文件系统的基本概念**：文件系统是操作系统用于组织磁盘上的数据的一种...
opengl实验4_OpenGL实验_
10-03
计算机图形学实验5二维几何变换 内有提高部分代码，非常实用
028 酒店管理ssm.zip
最新发布
08-20
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《028 酒店管理ssm》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
大学生创业计划书(46)-两份资料.doc
08-20
大学生创业计划书(46)-两份资料.doc
大学生创业计划书(24)-两份资料.docx
08-20
大学生创业计划书(24)-两份资料.docx
2012年吉林省大学生电子设计大赛原题目
08-20
2012年吉林省大学生电子设计大赛原题目
汇编语言第四版实验4
04-08
《汇编语言第四版实验4》是一本关于汇编语言实验的教材，它主要介绍了汇编语言的实验内容和实践操作。具体的实验内容可能因版本不同而有所差异，以下是一般情况下的实验4的介绍： 实验4通常是关于输入输出操作的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值