web实验4

最新推荐文章于 2024-10-17 09:52:22 发布
最新推荐文章于 2024-10-17 09:52:22 发布
阅读量41 收藏
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengj73/article/details/130246323
版权
文章展示了如何利用jQuery对HTML表格进行美化，包括奇偶行背景色设置，点击选中行功能，并详细解释了如何实现数据筛选和级联选择框的功能。同时，还给出了添加和删除表格行的示例代码，强调了动态元素事件处理的方法。
摘要由CSDN通过智能技术生成

奇数行背景色：#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>
    <script src="./jquery.min.js"></script>
    <style>
        table {
            width: 320px;
            border: 1px solid black;
            text-align: center;
            border-collapse: collapse;

        }

        th,
        td {
            border: 1px solid black;
            padding: 5px;
        }

        .odd {
            background-color: #FFF38F;
        }

        .even {
            background-color: #FFFFEE;
        }

        .choose {
            background-color: #FF6500;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <th></th>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </thead>

        <tbody>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>

        </tbody>
    </table>

    <script>
        $(function () {
            $('tbody>tr:odd').addClass('odd')
            $('tbody>tr:even').addClass('even')
            $('tbody tr').click(function () {
                $(this).addClass('choose')
                $(this).siblings().removeClass('choose')
                $(this).children('td').children('input').prop('checked', true)
            })
        })
    </script>
</body>

</html>
  • Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)
  • 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）
  • :contains(text) 匹配包含给定文本的元素
  • :empty 匹配所有不包含子元素或者文本的空元素
  • :parent 匹配含有子元素或者文本的元素
  • :has(selector) 匹配含有选择器所匹配的元素的元素
  • <!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.min.js"></script>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            margin: 100px;
        }

        table {
            width: 400px;
            border-collapse: collapse;
            border: 1px solid black;
            margin-top: 50px;
            text-align: center;
        }

        th,
        td {
            border: 1px solid black;
        }

        th {
            height: 30px;
        }
    </style>
</head>

<body>
    查询：<input type="text">
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </thead>
        <tbody>
            <tr>
                <td class="name">李四</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td class="name">张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td class="name">张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td class="name">张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td class="name">张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td class="name">张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(function () {
            $('tbody>tr:even').css('backgroundColor', '#FFF38F')
            $('tbody>tr:odd').css('backgroundColor', '#FFFFEE')
            $('input').on('input', function () {
                $('.name').parent().hide()
                let txt = $('input').val()
                $('.name').filter(`:contains(${txt})`).parent().show()
            })
        })


    </script>
</body>

</html>

    级联选择框

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

<body>
    <select id="province">
        <option>请选择</option>
    </select>
    <select id="cities">
        <option>请选择</option>
    </select>

    <script>
        $(function () {
            const prov = ['河北省', '辽宁省', '四川省']
            const city = [["石家庄", "邯郸", "唐山", "张家口", "廊坊"], ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市"], ['成都', '绵阳', '眉山', '乐山']]

            //遍历prov数组，将内容填充进去
            for (let i = 0; i < prov.length; i++) {
                $('#province').append(`<option>${prov[i]} </option>`)
            }
            $('#province').change(function () {
                //将不是请选择的内容移除
                $('#cities').children().not(':eq(0)').remove();
                // $('#cities').empty()
                //得到选择的省对应的序号
                const index = $(this).children('option:selected').index()
                // console.log(index);
                const newcity = city[index - 1]
                // console.log(newcity);
                for (let i = 0; i < newcity.length; i++) {
                    $('#cities').append(`<option>${newcity[i]} </option>`)

                }
            })
        })

    </script>
</body>

</html>

    数据添加行，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>
    <script src="./jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            margin: 50px;
            width: 700px;
        }

        .top {
            width: 100%;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        input {
            width: 160px;
            margin-right: 10px;
        }

        button {
            display: block;
            margin: 20px auto;
            width: 50px;
            height: 20px;
        }

        table {
            width: 400px;
            margin: 50px auto;
            border-collapse: collapse;
        }

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

<body>
    <div class="top">
        <h2>添加新员工</h2>
        name：<input type="text" class="name">
        email:<input type="text" class="email">
        salary:<input type="text" class="salary">
        <button>submit</button>
    </div>
    <hr>

    <div class="box">
        <table>
            <thead>
                <th>name</th>
                <th>email</th>
                <th>salary</th>
                <th></th>
            </thead>
            <tbody>
                <tr>
                    <td>tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="javascript:;">delete</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(function () {
            $('button').on('click', function () {
                $('table').append(`<tr> <td>${$('.name').val()}</td> <td>${$('.email').val()}</td> <td>${$('.salary').val()}</td><td><a href="javascript:;">delete</a></td>`)
                $('input').val('')
            })
            $('table').on('click', 'a', function () {
                $(this).parents('tr').remove()
            })
            //动态创建的元素进行操作时，需要将事件绑定在已经静态存在的父级上
            // $('a').on('click',function () {
            //     $(this).parent().parent().remove()
            // })
        })

    </script>
</body>

</html>

73560
关注
Web实验报告Web实验报告pdf
09-14
实验要求: (1)站点目录:要求层次分明，不能将内容都放在站点根目录下;不要使用中文;为每种类型文件都建立一个独立的目录。(例如images文件夹用于存放图象,目录的层次 不能没有，但必须尽量少，以便于管理.) (2)填写...
web实验报告
06-16
在本“Web实验报告”中，我们探讨了Web开发的核心概念和技术，这是一份由合肥学院的学生精心编写的参考资料，旨在帮助学习者更好地理解和实践Web开发。这份报告涵盖了多个关键领域，包括HTML、CSS、JavaScript基础，...
web网站实验报告
11-26
实验目的及要求】 1. 架设web服务器的需求环境； 2. 创建网站的虚拟目录； 3. 创建web网站； 安全管理web网站
小型web实验
10-20
### 小型Web实验知识点详解 #### 一、实验背景及目标 本实验是一份针对初学者设计的小型Web开发项目文档，适用于大学阶段的学生学习和实践。通过本实验，学生能够掌握基本的Web开发流程和技术栈应用。实验的具体...
java web 实验
01-17
在"java web"这个实验项目中，可能会涵盖上述一个或多个知识点，帮助学习者了解和实践Java Web开发的基本流程。通过实际项目，读者能够更好地理解如何将理论知识应用于实际场景，提升编程技能和问题解决能力。对于...
HTML 符号
lly202406的博客
10-12 450
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它使用一系列的标签来描述网页的结构和内容。HTML 符号，通常指的是 HTML 标签，是构成 HTML 文档的基础。本文将详细介绍 HTML 符号的概念、种类、用途以及如何在网页设计中正确使用它们。
Html/Vue浏览器下载并重命名文件
最新发布
NAN0808的博客
10-17 151
【代码】Html/Vue浏览器下载并重命名文件。
HTML_文本标签
no15870678621的博客
10-15 443
html文本标签
html笔记
2402_87039650的博客
10-13 1120
b>粗体文本 计算机代码强调文本斜体文本键盘输入预格式化文本更小的文本重要的文本缩写联系信息文字方向 从另一个源引用的部分 工作的名称 删除的文本 插入的文本 下标文本 上标文本。表格的表头使用 标签进行定义。HTML标题是通过标签来定义的，段落是通过定义的，链接是通过定义的。
html面试题总结
cx18333的博客
10-11 1075
在从事Web开发工作的过程中，我们常常会遇到这样的情况：尽管每天都在与HTML等前端技术打交道，但对于一些基础的概念性知识，却总是容易遗忘或混淆。为了帮助自己更好地巩固这些基础知识，我决定撰写一篇专门的博客文章，用来记录和整理那些在前端面试中常见的HTML相关问题及其答案。通过这种方式，不仅能够加深对这些概念的理解，还能为未来的面试和技术交流做好充分准备。希望这篇文章不仅能成为我个人的学习笔记，也能为其他正在努力提升自己的前端开发者提供一定的参考价值。
Chromium HTML attribute与c++接口对应关系分析
杰克东的专栏
10-11 525
访问 W3School
Chromium html＜iframe＞对应c++接口定义
杰克东的专栏
10-11 586
使用 标签 在当前 HTML 文档中嵌入另一个文档： 1、 在html_tag_names.json5中接口定义： （third_party\blink\renderer\core\html\html_tag_names.json5） 2、html_iframe_element.idl接口定义： third_party\blink\renderer\core\html\html_iframe_element.idl 3、html_iframe_elem
【Web——HTML 初阶】网页设计标题
xupy019的博客
10-14 1126
♥HTML是构建网页和Web应用的基础语言之一。不是一种编程语言，而是一种标记语言，用于描述网页的结构和内容。HTML使用标签（tags）来标记不同类型的元素，如标题、段落、链接、图像等，并通过这些标签来控制网页的显示方式。
html嵌入vue如何使用？
weixin_52236586的博客
10-14 209
html嵌入vue如何使用？
HTML语义化标签
GIS前端嘉欣的博客
10-11 1047
解决办法：在必要的情况下可以使用非语义化标签，但需要注意控制数量，尽量减少使用。同时，在使用非语义化标签时，应该为其添加合适的class和id属性，以便于CSS样式控制。在编写HTML时，应该根据具体情况选择合适的标签，避免过度使用语义化标签。有些老旧的浏览器可能不支持HTML5的语义化标签，这时可以使用JavaScript或CSS来实现相应的效果。解决办法：可以在语义化标签中添加class属性，并在CSS中对这些类进行样式定义，这样可以很好地解决样式问题。标签，或使用CSS为语义化标签添加样式。
如何将 html 渲染后的节点传递给后端？
Lovely Ruby 的手账
10-11 330
现在我有一个动态的html节点，我想用vue渲染后，传递给后端保存。
Html 标题加图标
fhqiwmc的博客
10-10 430
注意：一般请使用16*16的ico图标，不过经测试现代浏览器支持多种格式和多种大小格式的图标。本案例使用的是32*32大小的Png图标也是支持的。
HTML 之 ＜div＞ 和 ＜span＞
u010194271的博客
10-09 1096
div：用于创建大块内容的布局或容器，适合组织页面结构。span：用于在行内对小部分内容进行样式处理或包裹，不改变布局。
Chromium html＜li＞对应c++接口定义
杰克东的专栏
10-14 445
html＜li＞
Web实验教程：ASP与CSS实践
"这是一份针对学生的Web实验指导书，涵盖了使用ASP和CSS进行网页设计以及JavaScript编程的基础知识。实验内容包括HTML基本元素的使用、CSS样式应用、JavaScript交互功能的实现，旨在提升学生的Web开发技能。" 实验...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值