web实验记录4

于 2022-06-15 11:19:56 发布
阅读量220 收藏 2
点赞数 1
分类专栏： Web前端课程实验 文章标签： 前端 jquery javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoraemonDream/article/details/125293335
版权

web实验记录4

实验目的

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

实验内容

  1. 使用jquery实现如下界面效果：
    在这里插入图片描述
    提示：
    1)奇数行背景色：#FF6500；偶数行背景色：#FFFFEE;选中行：#FF6500
    2)选中行时，设置单选框选中状态

代码：

<!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>实验4-1</title>
    <script src="../JQuery/JQuery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #table1{
            width: 450px;
            height: 200px;
            margin: 100px auto;
            text-align: center;
            border: 1px solid black;
            border-collapse: collapse;
        }
        th{
            border: 1px solid black;
        }
        .th0{
            width: 75px;
        }
        .th1{
            width: 100px;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("tr:odd").css("background","rgb(255, 243, 143)");
            $("tr:even").css("background","#FFFFEE");
            $("tr").click(function(){
                var t_td = event.srcElement.parentElement;
                var row = t_td.rowIndex;
                var mycolor = $("tr:eq("+row+")").css("background-color");
                if(mycolor == "rgb(255, 101, 0)"){
                    $("tr:eq("+row+")").css("background","rgba(0, 0, 0, 0)");
                    $("tr:eq("+row+")>td>input").attr("checked",false);
                    $("tr:odd").css("background","rgb(255, 243, 143)");
                    $("tr:even").css("background","#FFFFEE");
                }else{
                    $("tr:eq("+row+")").css("background","#FF6500");
                    $("tr:eq("+row+")>td>input").attr("checked",true);
                };
            });
        });   
    </script>
</head>
<body>
    <table id="table1">
        <thead>
            <th class="th0"></th>
            <th class="th1">姓名</th>
            <th class="th1">性别</th>
            <th>暂住地</th>
        </thead>
        <tr>
            <td>
                <input type="radio" id="radio1">
            </td>
            <td>张三</td><td>男</td><td>四川成都</td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio2">
            </td><td>李四</td><td>女</td><td>四川绵阳</td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio3">
            </td><td>王五</td><td>男</td><td>四川南充</td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio4">
            </td><td>赵六</td><td>男</td><td>四川自贡</td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio5">
            </td><td>陈勇</td><td>男</td><td>四川德阳</td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio6">
            </td><td>罗梅</td><td>女</td><td>四川宜宾</td>
        </tr>
    </table>
</body>
</html>
  1. 使用jquery实现内容过滤，效果如下图所示：
    在这里插入图片描述
    在这里插入图片描述
    提示：
    1)Jquery中提供了filter方法进行过滤，如$(“选择器”).filter(内容过滤器)
    2)搜索过程中可先隐藏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>实验4-2</title>
    <script src="../JQuery/JQuery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 0 auto;
            text-align: center;
        }
        #col_1,#col_3{
            width: 200px;
        }
        #col_2{
            width: 120px;
        }
        table{
            text-align: center;
            margin: 0 auto;
            border: 1px solid black;
            border-collapse: collapse;
        }
        th{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("tr:odd").css("background","rgb(255,243,143)");
            $("tr:even").css("background","#FFFFEE");
            var Searchfor=$("#find");
            Searchfor.on("input",function(){
                var Search=$("#find").val();
                $("#table1 .people").hide();
                $("#table1 .people .name").filter(":contains('" + Search + "')").parents("tr").show()
            });
        });
    </script>
</head>
<body>
    <div>
    <span>查询</span>
    <input type="search" id="find"><br><br>
    <table id="table1">
        <thead>
            <th id="col_1">姓名</th><th id="col_2">性别</th><th id="col_3">暂住地</th>
        </thead>
        <tr class="people">
            <td class="name">张山</td><td>男</td><td>浙江宁波</td>
        </tr>
        <tr class="people">
            <td class="name">李四</td><td>女</td><td>浙江杭州</td>
        </tr>
        <tr class="people">
            <td class="name">王五</td><td>男</td><td>湖南长沙</td>
        </tr>
        <tr class="people">
            <td class="name">赵六</td><td>男</td><td>浙江温州</td>
        </tr>
        <tr class="people">
            <td class="name">Rain</td><td>男</td><td>浙江杭州</td>
        </tr>
        <tr class="people">
            <td class="name">MAXMAN</td><td>女</td><td>浙江杭州</td>
        </tr>
        <tr class="people">
            <td class="name">王六</td><td>男</td><td>浙江杭州</td>
        </tr>
        <tr class="people">
            <td class="name">李字</td><td>女</td><td>浙江杭州</td>
        </tr>
        <tr class="people">
            <td class="name">李四</td><td>男</td><td>湖南长沙</td>
        </tr>
    </table>
    </div>
</body>
</html>
  1. 界面实现效果参考如下图。
    在这里插入图片描述

代码：

<!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>实验4-3</title>
    <script src="../JQuery/JQuery.js"></script>
    <style>
        div{
            height: auto;
            margin: 100px;
            text-align: center;
        }
        select{
            width: 100px;
            height: 25px;
        }
    </style>
</head>
<body>
    <div>
    <select id="Province">
        <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>
    </div>
    <script>
        var cities=[
            ["请选择"],
            ["请选择","石家庄","邯郸","唐山","张家口","廊坊"],
            ["请选择","沈阳","鞍山","大连","葫芦岛","锦州"],
            ["请选择","济南","青岛","烟台","临沂","潍坊"]];
            $("#Province").change(function(){
                $("#Cities").empty();
                var index=$("#Province").val();
                for(var i=0; i<cities[index].length; i++){
                    var option="<option>"+cities[index][i]+"</option>";
                    $("#Cities").append(option);
                }
            })
    </script>
</body>
</html>
  1. 使用Jquery实现将输入数据添加至表格中，通过点击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>实验4-4</title>
    <script src="../JQuery/JQuery.js"></script>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        .div1{
            text-align: center;
            margin: 50px;
        }
        #table1{
            width: 450px;
            height: auto;
            margin: 100px auto;
            text-align: center;
            border: 1px solid black;
            border-collapse: collapse;
        }
        th{
            border: 1px solid black;
            height: 50px;
        }
        .th0,.th2,.th3{
            width: 75px;
        }
        .th1{
            width: 100px;
        }
        tr{
            height: 50px;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <script>
        $(document).ready(function(){
            //点击submit按钮进行添加
            $("#t_submit").click(function(){
                var S_name = $("#S_name").val();
                var S_email = $("#S_email").val();
                var S_salary = $("#S_salary").val(); 
                var content="<tr>"+
                    "<td>"+S_name+"</td>"+
                    "<td>"+S_email+"</td>"+
                    "<td>"+S_salary+"</td>"+
                    "<td>"+'<a href="#">Delete</a>'+"</td>"+
                    "</tr>";
                $("#table1").append(content);
                //点击删除
                $("a").click(function(){
                $(this).parents("tr").remove();
                })
            });
        });
    </script>
</head>
<body>
    <div class="div0">
        <div class="div1">
        <span class="head">添加新员工</span><br><br>
        <span>name：</span>
        <input type="text"  id="S_name">
        <span>email：</span>
        <input type="email" id="S_email">
        <span>salary：</span>
        <input type="text"  id="S_salary"><br><br>
        <input type="submit" value="Submit" id="t_submit">
        </div>
        <hr>
        <div class="div2">
            <table id="table1">
                <thead>
                    <th class="th0">Name</th>
                    <th class="th1">Email</th>
                    <th class="th2">Salary</th>
                    <th class="th3"></th>
                </thead>
                <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>Jerry</td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

写在最后

仅对个人实验做一次记录，文中不足、错误之处欢迎指正；
创作不易，点个赞吧！

是小夢夢啊
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端实训两天记录
jihome的博客
05-08 3808
Web前端开发的基础知识，涉及HTML和CSS的基础知识。
web实训课笔记
yuehailin的博客
01-15 405
1.标记           行  块 2.div----(h1 p) 3    3.1 标记        div   img h1-h6 p body        style    3.1.1 超链接：负责页面跳转的语句。类似目录    3.2 CSS      3.2.1 选择器            id选择器  #XXX{}            类选择器
web页面实训笔记——3.12
qq_44786217的博客
03-16 125
掌握javascript基本语法掌握脚本的基本结构掌握常用输入输出语句*掌握变量的定义 *理解javascript的数据类型@基本数据类型 1.数值类型2.布尔类型3.字符串类型@符合数据类型数组与对象 @特殊数据类型Null和undefine *学会使用分支语句1.顺序语句2.分支语句3.循环语句 *了解表达式操作符运算符等 JavaScript数据类型： 1.布尔类型 2.字符串类型 3.布尔...
web实验记录1
DoraemonDream的博客
06-15 259
HTML： CSS： 完成如下图所示界面设计效果。 说明： 1)可考虑基于列表进行设计，居中显示 2)将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px 3)上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333 4)所需图片见附件，图片宽度154px，左间距60px HTML: CSS: 完成下图所示的静态网页制作。 说明： 1)可考虑基于列表进行设计，居中显示 2)列表项高320px 宽250px，外间距10px，内间距
WEB实训
xiaoshiyo的博客
03-15 1687
1 创建JavaScript脚本片段 html4 版本 &lt;script language="JavaScript" type="text/javascript"&gt; &lt;/script&gt; html5版本 &lt;script&gt; ———— —— &lt;/script&gt; 2 使用外部的JavaScript文件 &lt;script language...
web实验5JavaScript综合实验
12-07
"web实验5JavaScript综合实验" 本实验涵盖了三个主要部分：弹出广告页面、动态时间显示和图片广告滚动。下面将详细解释每个部分的实现原理和技术要点。 弹出广告页面 在这个实验中，我们使用JavaScript来实现弹出...
Web实验报告课程设计.doc
11-23
Web实验报告课程设计 本文档是Web实验报告课程设计的文档，旨在通过制作一个网站来满足实验大纲要求。整个网站的设计和开发过程分为七个步骤：明确需求、下载图片和文本、构建框架、敲入代码、页面调整和优化、美观...
web实验3.pdf
09-27
实验报告应当包括设计过程、实验步骤、运行调试记录和运行结果截图等内容，并且需要根据实验情况和结果撰写。 本实验旨在让学生掌握 C# 语言规范、基础语法、流程控制和异常处理等，并应用于 ASP.NET 4.5 页面中。...
小型web实验
10-20
### 小型Web实验知识点详解 #### 一、实验背景及目标 本实验是一份针对初学者设计的小型Web开发项目文档，适用于大学阶段的学生学习和实践。通过本实验，学生能够掌握基本的Web开发流程和技术栈应用。实验的具体...
实验七Web服务器配置.doc
最新发布
12-15
* 可以设置Web站点的TCP端口号、日志记录、主目录、文档、目录安全性等属性。 五、测试Web站点的方法 * 可以通过本地IP地址来访问该Web站点。 * 可以启动、停止和暂停Web服务。 六、IIS验证方法 * 匿名验证：使...
Web实训
weixin_44762420的博客
03-23 592
Javascript注释; //:添加多行注释 /**/：添加多行注释（webstorm快捷键：ctrl+shift+？） 包含块：包含块是标准布局中一个重要概念，它是绝对定位的基础，包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，boby元素是一个大的包含块，所有绝对定位的元素都是根据boby来确定自己所处位置的。但是如果定义了包含元素（指元素内容包含其它元素）为...
EL表达式在jsp页面获取url传参。
xjh101010的专栏
02-02 1245
比如说URL："${path }/admin/tree_dept.jsp?mode=user&clickFunc=userTreeClickFunc" 那么，在jsp页面可以这样获取参数和值："${param.mode}","${param.clickFunc}"这样分别获取到值“user”“userTreeClickFunc”
单击行，自动选中当前行中的单选框按钮
邹玉杰（邹琼俊）的专栏
11-01 6450
需求：单击行，自动选中当前行中的单选框按钮。 aspx页面：
element-ui 带单选框的表格
weixin_30652271的博客
03-14 560
效果：不只是带单选框，点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行，配合element-ui的单选table时发现两个的选择状态是不一致的，所以调整了一下效果 提供下思路： 1.保证不止是点击单选框，点击列表某行也能够选中，通过设置highlight-current-row和@current-change="handleCurrentChange"...
jquery-设置单选框的选中状态和清除选中状态
m0_52263688的博客
01-06 2670
//设置单选框的选中属性 $(this).prop("checked", true); //取消单选框的选中 $(this).prop("checked", false);
简单实现element-ui单选框并点击当前行设置选中状态
weixin_42648698的博客
04-27 1890
简单实现element-ui单选框并点击当前行设置选中状态 主要通过给element-ui表格的事件@row-click绑定方法实现 ，代码经过简化后如下： <template> <div class="app-container"> <el-table v-loading="loading" ref="table" :height="tableHeight" :data="maintainList" @sort-change="handle
vc6.0mfc中单选按钮如何分组_一篇文章弄懂单选框
weixin_39568133的博客
12-07 736
单选框是非常常见的表单元素。它通常被用来从一组互斥的相关选项中选择一个单独的选项。当点击一个未选中的单选框时，它会被选中，其他按钮则会变成未选中状态。​发展历史单选框的命名（Radio）来源于旧收音机上的物理按钮，当时被用来在频率和预置电台之间切换。当一个按钮被按下时，所有其他的按钮都会弹出，使被按下的按钮成为唯一处于“按下”状态的按钮。该概念后来被用在磁带录音机、盒式录音机以及大名鼎鼎的“随身听...
Jquery操作单选框选中状态
热门推荐
jiegeng2233的博客
11-08 3万+
前端开发中经常使用到单选框(radio)与多选框(checkbox)组件，需要对组件的状态进行设置和读取，下面看一段网上流行的操作代码： class="cb-container"> input type="radio" class="cb-radio" id="r1" name="rd" value="left"/> input type="radio" class="cb-radio cb-g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小夢夢啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值