WEB前端实验四

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量107 收藏 1
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57340552/article/details/130308013
版权

  • 奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
  • 选中行时，设置单选框选中状态
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#table1 tr:odd").addClass("odd");
        $("#table1 tr:even").addClass("even");

        $('input:radio[name="rd"]').click(function(){
            $("input[type='radio']").each(function () {
                if ($(this).is(":checked")) {        
                    $("#table1 tr:odd").attr({
                        "class" : "odd"
                    })
                    $("#table1 tr:even").attr({
                        "class" : "even"
                    })              
                    $("#"+$("input[name='rd']:checked").val()).attr({
                        "class" : "selection"
                    })
                }
            });
        });
    })
</script>

<style type="text/css">
    .odd{ background-color:#FFF38F;}
    .even{ background-color:#FFFFEE; }
    .selection{background-color:#FF6500; }
    
    table{
    border-spacing: 0;
    margin-right: auto;
    margin-left: auto;
    }

    th, td{
    border: 1px solid #000;
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    height: 26px;
    }

</style>
</head>

<body>
    <table id="table1" >
        <tr>
            <th style="width: 50px;"></th>
            <th style="width: 50px;">姓名 </th>
            <th style="width: 50px;">性别</th>
            <th style="width: 160px;">暂住地</th>
        </tr>
        <tr id="td2">
            <td> <input type="radio" name="rd" value="td2"/></td>
            <td>张三</td>
            <td>男</td>
            <td>四川成都</td>
        </tr>
        <tr id="td3">
            <td> <input type="radio"  name="rd" value="td3" /></td>
            <td>李四</td>
            <td>女</td>
            <td>四川德阳</td>
        </tr>
        <tr id="td4">
            <td> <input type="radio" name="rd"  value="td4" /></td>
            <td>王五</td>
            <td>男</td>
            <td>四川南充</td>
        </tr>
        <tr id="td5">
            <td> <input type="radio"  name="rd" value="td5" /></td>
            <td>赵六</td>
            <td>男</td>
            <td>四川自贡</td>
        </tr>
        <tr id="td6">
            <td> <input type="radio"  name="rd" value="td6" /></td>
            <td>陈勇</td>
            <td>男</td>
            <td>四川德阳</td>
        </tr>
        <tr id="td7">
            <td> <input type="radio"  name="rd" value="td7" /></td>
            <td>罗梅</td>
            <td>女</td>
            <td>四川宜宾</td>
        </tr>
</table>
</body>
</html>

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

 

提示：

  • Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)
  • 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#table1 tr:odd").addClass("odd");
        $("#table1 tr:even").addClass("even");
        $("#check_input").keyup(function() {
            var text=$("#check_input").val();
            $("tr[name='rd']").hide();
            $("tr[name='rd']").filter(":contains('" + text + "')").show();
        })
    })
</script>


<style type="text/css">
    .odd{ background-color:#FFF38F;}
    .even{ background-color:#FFFFEE; }
    .selection{background-color:#FF6500; }
    body{
        height:90%;width:40%;
        margin:auto;
        top:0;right:0;bottom:0;left:0;
        position:fixed;
    }
    table
    {
        border-spacing: 0;
    }
    th, td
    {
        border: 1px solid #000;
        font-size: 13px;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        height: 26px;
    }
    .checbox{
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>
</head>

<body>
    <div>
        <div class="checbox">
            <label>查询：</label>
            <input type="text" value="" id="check_input" >
        </div>

        <table id="table1" >
            <tr>
                <th style="width: 50px;">姓名 </th>
                <th style="width: 50px;">性别</th>
                <th style="width: 160px;">暂住地</th>
            </tr>
            <tr id="td2" name="rd">
                <td>张山</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr id="td2"name="rd">
                <td>李四</td>
                <td>女</td>
                <td>浙江杭州</td>
            </tr>
            <tr id="td2"name="rd">
                <td>王五</td>
                <td>男</td>
                <td>湖南长沙</td>
            </tr>
            <tr id="td2"name="rd">
                <td>找六</td>
                <td>男</td>
                <td>浙江温州</td>
            </tr>
            <tr id="td2"name="rd">
                <td>Rain</td>
                <td>男</td>
                <td>浙江杭州</td>
            </tr>
            <tr id="td2"name="rd">
                <td>MAXMAN</td>
                <td>女</td>
                <td>浙江杭州</td>
            </tr>
            <tr id="td2"name="rd">
                <td>王六</td>
                <td>男</td>
                <td>浙江杭州</td>
            </tr>
            <tr id="td2"name="rd">
                <td>李字</td>
                <td>女</td>
                <td>浙江杭州</td>
            </tr>
            <tr id="td2"name="rd">
                <td>李四</td>
                <td>男</td>
                <td>湖南长沙</td>
            </tr>
        </table>
    </div>


</body>
</html>

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

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js">
        $(function () {
            $(".formOption").click(function () { 
                $(this).siblings('.formList').show();
            })
            $(".formPic").click(function () { 
                if ($(this).siblings('.formList').is(":hidden")) {
                    $(this).siblings('.formList').show();
                } else {
                    $(this).siblings('.formList').hide();
                }
            })
            $('.formList').on('click', 'li', function () { 
                var li_txt = $(this).html();
                var li_value = $(this).attr('tit');
                $(this).parent().siblings('input.formOption').attr('title', li_value);
                var  Lid = $(this).parent().siblings('input.formOption').attr('id');  
                switch(Lid)  {
                    case 'AreaCode1':   
                        quxian(li_value);                 
                        break;
                    case 'AreaCode2':  
                        lvshi(li_value);
                        break;
                }
                $(this).parent().hide();
                $(this).parent().siblings('input.formOption').val(li_txt);
            })
            $('.formSlect').mouseleave(function () {   
                $('.formList').hide();
            })
        });

</script>

<style>
    select {
        border: 1px solid ;
    }
</style>
</head>
<body>
    <select id="province">
        <option id="prov">请选择</option>
        <option value="河北省">河北省</option>
        <option value="辽宁省">辽宁省</option>
        <option value="山东省">山东省</option>
    </select>
        <select id="city">
            <option>请选择</option>
        </select>
    
        <script type="text/javascript">
            $(function () {
                var arr = new Array();
                arr["河北省"] = ["石家庄", "邯郸", "唐山", "张家口", "廊坊"];
                arr["辽宁省"] = ["沈阳", "大连", "营口", "锦州","盘锦"];
                arr["山东省"] = ["济南","青岛","威海","济宁","烟台"];

                $("#province").change(function () {
                    $("#city").empty();
                    $("#city").append("<option>请选择</option>")
                    var val = $("#province").val();
                    var values = arr[val];
                    for (var v in values) {
                        $("#city").append("<option value='" + values[v] + "'>" + values[v] + "</option>")
                    }
                })
            })
    </script>
</body>
</html>

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

 

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
            $("#submit").click(function() {
                if (($("#name").val().trim() != "") && ($("#email").val().trim() != "") && ($("#salary").val().trim() != "")) {
                    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 id='del' class='del'>Delete</td></tr>");
                    $("#name").val('');
                    $("#email").val('');
                    $("#salary").val('');
                }
                $("tr>.del").click(function() {
                    $(this).parent().remove();
                });
            });
        });
</script>
<style type="text/css">
    fieldset {
            border: 0px;
            text-align: center;
            border-bottom: 1px solid black;
        }

    table{
        border-spacing: 0;
        text-align: center;
    }
    th, td{
        border: 1px solid #000;
        font-size: 13px;
        text-align: center;
        vertical-align: middle;
        height: 26px;
    }

    .del {
        text-decoration: underline;
        color: blue;
    }
    .div1{
        height:70%;width:40%;
        position:fixed;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
    }
    #submit{
        width: 75px;
        margin-left: 50px;
        margin-top: 10px;
    }
</style>
</head>

<body>
    <form action="">
        <fieldset>
            <legend>添加新员工</legend>
            name:<input type="text" id="name" /> 
            email:<input type="text" id="email" /> 
            salary:<input type="text" id="salary" /><br/>
            <input type="button" value="Submit" id="submit" />
        </fieldset>
    </form>
        <div class="div1">
            <table id="table1" >
                <tr>
                    <th style="width: 60px;">Name </th>
                    <th style="width: 160px;">Email</th>
                    <th style="width: 60px;">Salary</th>
                    <th style="width: 60px;"> </th>
                </tr>
                <tr id="td2">
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td id="del" class="del">Delete</td>
                </tr>
                <tr id="td3">
                    <td>Jerry</td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td id="del" class="del">Delete</td>
                </tr>
                <tr id="td4">
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td id="del" class="del">Delete</td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

沈十六6127
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery实现如下界面效果（表格，奇偶行颜色不同）
scscdstfxqxxzqqc的博客
03-31 2941
使用jquery实现如下界面 提示： 1、奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500 2、选中行时，设置单选框选中状态 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入jquery库 --> <script src="../js/jquery.min.js" type="text/javascrip
Web 实验四
van_van_v的博客
04-27 979
实验目的及要求： 握Jquery页面初始化方法 掌握Jquery的选择器的基本使用 掌握Jquery对DOM 的基本操作 实验内容： 1.使用jquery实现如下界面效果： 提示： 奇数行背景色：#FF6500；偶数行背景色：#FFFFEE;选中行：#FF6500 选中行时，设置单选框选中状态 运行截图 代码： <!DOCTYPEhtml> <htmllang="en"> <head> &...
jQuery实现点击复选框即高亮显示选中行 全选、反选
言会咸
08-11 4572
jQuery实现点击复选框即高亮显示选中行 全选、反选 table{ border:0;border-collapse:collapse;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-b
前端-实验4
weixin_43700475的博客
04-27 528
1.使用jquery实现如下界面效果： 提示：  奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500选中行时，设置单选框选中状态 代码: <html> <head> <meta charset="utf-8"> <title>实验4-1</title> <script type="text/javascript" src="jquery-3.6.0.min.js"> </script&
web前端实验四
m0_57315637的博客
04-22 563
说明：所有实验内容可选择jquery或vue的任一项技术路线实现。
web前端开发实验——4
qq_46476515的博客
10-17 687
web前端开发实验——4
BJFU2023Web前端实验四
m0_74216578的博客
05-23 67
【代码】BJFU2023Web前端实验四。
web前端开发实验——1
qq_46476515的博客
10-15 1158
web前端开发应用作业 1
web前端开发实验——2
qq_46476515的博客
10-16 1967
web前端开发实验——2
Web前端实验五
qq_64381400的博客
04-22 370
复制身份令牌，点击页面右上角的“Authorization”，粘贴后点击按钮“Authorize”5.点击“删除”按钮请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。请求头中携带当前登录用户的token身份令牌。
html5,web前端实验四
12-22
这个"html5,web前端实验四"的主题围绕着四个关键概念：鼠标经过显示大图（Hoverbox Image Gallery）、超链接、文本标签以及简易商品导购。下面我们将深入探讨这些知识点。 首先，Hoverbox Image Gallery是一种交互...
html5，web前端实验
12-22
这个"html5，web前端实验"的项目着重于实践HTML5在创建网页时的应用，特别是关于表格、新闻页面排版和使用div进行页面布局的技巧。 首先，让我们详细探讨HTML5中的表格。在HTML4中，表格主要用于数据展示，而在...
html5 web前端实验11
12-22
(2)检查口令合法性，出错信息如图1-11-4所示。 口令规则：长度不能小于8位或大于15位 图1-11-4 口令有效性检查页面 (3)二次口令有效性，检查出错信息如图1-11-5所示。 二次口令规则：口令与二次口令必须相同 图1...
Web前端 实验 实验三（1）.7z
11-19
实验的标题"Web前端 实验 实验三（1）.7z"表明这是一个关于Web前端开发的学习项目，可能是一个逐步指导或实战练习，旨在帮助学习者掌握网页制作的基本技能。 首先，HTML（HyperText Markup Language）是网页内容的...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1027
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 515
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
Vue前端打包
最新发布
weixin_63680330的博客
07-04 185
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1277
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1191
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
Web实验报告课程设计.doc
11-23
网页实验报告课程设计是为了...通过设计和制作网站，我们不仅学到了很多关于Web前端技术的知识和技能，还提升了我们的创造力和设计能力。这次课程设计能够基本满足实验大纲要求，是一次非常有价值的实践和学习经历。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值