当前位置： 首页 > news >正文

1 请使用js、css、html技术实现以下页面，表格内容根据查询条件动态变化。

news 2025/9/15 21:06:49

 1.1 创建css文件，用于编辑style

        注意：

        1.背景颜色用ppt的取色器来获取：

                先点击ppt的形状轮廓，然后点击取色器，吸颜色，然后再点击形状轮廓的其他轮廓颜色，即可获取到对应颜色。

 

        2.表格间的灰色线是在th和td中用border属性设置的；

        3.在js中拼接字符串时，不允许在一对双引号中继续出现双引号，内部应使用单引号：

str += "<tr bgcolor='#EAF3F2'>";

        4. 使用css的外部样式表时，外部样式会最后把html里设置的样式覆盖掉！

        5.查询地区按钮实现逻辑：先获取选择框的text文本，再创建一个方法，输入是原始表格数据，输出是新数据，通过获取原始表格每一行第一列的数据与text文本进行判断，如果相等，则新数据使用push方法添加整行数据，如果不相等直接break，开始下一行判断。注意，要考虑text为“全部”的情况。在得到新的表格数据后，先清空原来的表格数据，再将新数据作为输入再次调用原来创建动态表格的方法即可。

        css文件如下：

select{margin-right: 10px;
}body{height: 800PX;background: linear-gradient(to bottom,#DCF3F2,#A3E5E7);
}button{color: white;background-color: #007A89;border-color: #007A89;
}hr{border: 0.1px dashed black;
}p{text-align: right;font-size: 13px;margin-top: 0;margin-bottom: 0;
}table{width: 100%;border-collapse: collapse;
}th{background-color: #00A8A6;color: white;
}th,td{text-align: center;border:  solid silver;font-size: 14px;padding: 0.1px;
}

       js文件如下：

function getTbodyDatas(tableDatas){var str = "";for(var i = 0;i<tableDatas.length;i++){if(i%2==0||i==0){str += "<tr bgcolor='#EAF3F2'>";}else{str += "<tr bgcolor='#FAFFFF'>";}for(var j = 0;j<tableDatas[i].length;j++){str = str+"<td>"+tableDatas[i][j]+"</td>";}str += "</tr>";}return str;
};function getNewDatas(tableDatas){var newDatas = [];var selectLabel = document.getElementById("location");var selectText = selectLabel.options[selectLabel.selectedIndex].text;if(selectText == "全部"){return tableDatas;}for(var i = 0;i<tableDatas.length;i++){if(tableDatas[i][0]==selectText){newDatas.push(tableDatas[i]);}}console.log(newDatas);return newDatas;
}function getLocation(){document.getElementById("tbodyDatas").innerHTML = "";var newDatas = getNewDatas(tableDatas);document.getElementById("tbodyDatas").innerHTML = getTbodyDatas(newDatas);};

        html文件如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="../css/date0723.css"/><title></title></head><body><label for="location">地区</label><select id="location"><option>全部</option><option>福州</option><option>南平</option><option>宁德</option></select><label for="state">状态</label><select id="state"><option>全部</option></select><label for="v-class">电压等级</label><select id="v-class"><option>全部</option></select><label for="property">资产属性</label><select id="property"><option>全部</option></select><button type="button" onclick="getLocation(tableDatas)" class="bottom-button">查询</button><button type="button" class="bottom-button">重置</button><button type="button" class="bottom-button">导出</button><button type="button" class="bottom-button">历史统计</button><hr><p>当前页 10 条记录/5587条记录</p><table><thead><tr><th>地区</th><th>线路1</th><th>线路2</th><th>线路3</th><th>线路5</th><th>线路5</th><th>线路6</th><th>线路7</th><th>线路8</th></tr></thead><tbody id="tbodyDatas"></tbody></table><script src="../js/date0723.js"></script><script>var tableDatas = [["福州",1,2,5,3,5,5,6,8],["宁德",1,22,5,3,5,5,6,8],["福州",1,42,5,3,5,5,6,8],["南平",1,52,5,3,5,5,6,8],];document.getElementById("tbodyDatas").innerHTML=getTbodyDatas(tableDatas);</script><div align = "center"><button type="button" class="last-button">前一页</button><button type="button" class="last-button">1</button><button type="button" class="last-button">2</button><button type="button" class="last-button">3</button><button type="button" class="last-button">4</button><button type="button" class="last-button">5</button><button type="button" class="last-button">后一页</button></div></body>
</html>

        运行结果：

相关文章：

1 请使用js、css、html技术实现以下页面，表格内容根据查询条件动态变化。

1.1 创建css文件&#xff0c;用于编辑style 注意&#xff1a; 1.背景颜色用ppt的取色器来获取&#xff1a; 先点击ppt的形状轮廓&#xff0c;然后点击取色器&#xff0c;吸颜色&#xff0c;然后再点击形状轮廓的其他轮廓颜色&#xff0c;即可获取到对应颜色。 2.表格间的灰色线…...

编程日记 2023/7/27 21:43:35

react-native项目安卓版本升级 compileSdkVersion 29-＞31

因为 react-native-ble-manager添加过程及碰到的问题 依赖 https://github.com/innoveit/react-native-ble-manager 参考&#xff1a;https://blog.csdn.net/withings/article/details/71378562 iOS 按react-native-ble-manager 文档在 【Info.plist】加了key之后能正常使用…...

编程日记 2023/7/27 21:42:34

【学习笔记】目标跟踪领域SOTA方法比较

目录 前言方法1 TraDeS:2 FairMOT:3 SMILEtrack:4 ByteTrack: 前言 常用于行人跟踪的多目标跟踪数据集包括&#xff1a;MOT 15/16/17/20、PersonPath22等… 为更好比较现有SOTA算法的检测性能&#xff0c;本博客将针对在各数据集上表现较优的算法模型进行介绍。&#xff08;表…...

编程日记 2023/7/27 21:41:33

机器学习 深度学习编程笔记

sigmoid函数 def sigmoid(x):return 1.0 / (1np.exp((-x)))定义最小平方和损失函数 loss torch.nn.MSELoss()线性回归编程 如果不加噪音就成了正常的线性函数了&#xff0c;所以要加噪音。 torch.normal(0, 0.01, y.shape)torch.normal(0, 0.01, y.shape)是一个用于生成服从…...

编程日记 2023/7/27 21:40:32

18.背景轮播

背景轮播 html部分 <div class"container"><div class"slide active" style"background-image: url(./static/20180529205331_yhGyf.jpeg);"></div><div class"slide " style"background-image: url(./s…...

编程日记 2023/7/27 21:39:30

论文代码学习—HiFi-GAN（2）——鉴别器discriminator代码

文章目录 引言正文鉴别器多周期鉴定器多尺度鉴定器问题 总结 引言 这里翻译了HiFi-GAN这篇论文的具体内容&#xff0c;具体链接。这篇文章还是学到了很多东西&#xff0c;从整体上说&#xff0c;学到了生成对抗网络的构建思路&#xff0c;包括生成器和鉴定器。细化到具体实现的…...

编程日记 2023/7/27 21:38:29

Linux Shell 脚本编程学习之【第3章 正则表达式 （第二部分） grep命令】

第3章 正则表达式 &#xff08;第二部分&#xff09; 4 grep命令4.1 基本用法4.2 参考命令4.2.1 双引号4.2.2 -c 输出匹配行数4.2.3 -h 或 -l 不显示或只显示文件名4.2.4 -s 不显示错误信息4.2.5 -r 递归显示本级目录及下级目录4.2.6 -w 匹配完整词 -x 匹配完整行4.2.7 -q 退出…...

编程日记 2023/7/27 21:37:28

大语言模型LLM

目录 一、语言模型的发展 语言模型&#xff08;Language Model&#xff0c;LM&#xff09;目标是建模自然语言的概率分布&#xff0c;具体目标是构建词序列w1,w2,...,wm的概率分布&#xff0c;即计算给定的词序列作为一个句子出现可能的大小P(w1w2...wm)。但联合概率P的参数量…...

编程日记 2023/7/27 21:36:27

自学网络安全（黑客）的误区

前言 网络安全入门到底是先学编程还是先学计算机基础&#xff1f;这是一个争议比较大的问题&#xff0c;有的人会建议先学编程&#xff0c;而有的人会建议先学计算机基础&#xff0c;其实这都是要学的。而且这些对学习网络安全来说非常重要。 一、网络安全学习的误区 1.不要…...

编程日记 2023/7/27 21:35:24

@Conditional

Conditional Conditional 是 spring framework 中提供的一个条件注解&#xff0c;&#xff0c;满足条件就注入&#xff0c;不满足就不注入ioc Condtional 需要和 Condition接口 一起用&#xff1a; 返回true注入&#xff0c;返回false不注入&#xff0c;&#xff0c; 里面有一…...

编程日记 2023/7/27 21:34:23

【Linux】网络基础之TCP协议

目录 &#x1f308;前言&#x1f338;1、基本概念&#x1f33a;2、TCP协议报文结构&#x1f368;2.1、源端口号和目的端口号&#x1f369;2.2、4位首部长度&#x1f36a;2.3、32位序号和确认序号&#xff08;重点&#xff09;&#x1f36b;2.4、16位窗口大小&#x1f36c;2.5、…...

编程日记 2023/7/27 21:33:22

Java设计模式之装饰器（Decorator）模式

装饰器&#xff08;Decorator&#xff09;设计模式允许动态地将新功能添加到对象中&#xff0c;同时又不改变其结构。 什么是装饰器模式 装饰器&#xff08;Decorator&#xff09;模式通过将对象进行包装&#xff0c;以扩展其功能&#xff0c;而不需要修改其原始类。装饰器模…...

编程日记 2023/7/27 21:32:21

element ui树组件render-content 树节点的内容区的渲染另一种方式

直接上代码吧,不用h的写法。 <el-tree :data"data" node-key"id" default-expand-all :expand-on-click-node"false" :props"defaultProps":render-content"renderContentTree" node-click"handleNodeClick"&g…...

编程日记 2023/7/27 21:31:20

html a标签换行显示

文章目录 用css display属性不用css&#xff0c;可以用<br>标签换行示例 用css display属性 可以使用CSS的display属性来实现多个a标签每行显示一个。 HTML代码&#xff1a; <div class"link-container"><a href"#">Link 1</a>…...

编程日记 2023/7/27 21:30:19

关于Redis-存Long取Integer类型转换错误的问题

背景 最近遇到了两个Redis相关的问题&#xff0c;趁着清明假期&#xff0c;梳理整理。 1.存入Long类型对象&#xff0c;在代码中使用Long类型接收&#xff0c;结果报类型转换错误。 2.String对象的反序列化问题&#xff0c;直接在Redis服务器上新增一个key-value&#xff0c…...

编程日记 2023/7/27 21:29:17

设计模式一：简单工厂模式（Simple Factory Pattern）

简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一个通用的接口来创建各种不同类型的对象&#xff0c;而无需直接暴露对象的创建逻辑给客户端。 简单工厂的三个重要角色&#xff1a; 工厂类&#xff08;Factory Class&…...

编程日记 2023/7/27 21:28:16

如何利用plotly和geopandas根据美国邮政编码（Zip-Code）绘制美国地图

对于我自己来说&#xff0c;该需求源自于分析Movielens-1m数据集的用户数据&#xff1a; UserID::Gender::Age::Occupation::Zip-code 1::F::1::10::48067 2::M::56::16::70072 3::M::25::15::55117 4::M::45::7::02460 5::M::25::20::55455 6::F::50::9::55117我希望根据Zip-…...

编程日记 2023/7/27 21:27:14

ceph集群搭建

文章目录 理论知识具体操作搭建ceph本地源yum源及ceph的安装配置NTP&#xff08;解决时间同步问题&#xff09;部署ceph自定义crush 理论知识 Ceph是一个分布式存储系统&#xff0c;并且提供了文件、对象、块存储功能。 Ceph集群中重要的守护进程有&#xff1a;Ceph OSD、Cep…...

编程日记 2023/7/27 21:26:13

前端密码加密 —— bcrypt、MD5、SHA-256、盐

&#x1f414; 前期回顾悄悄告诉你&#xff1a;前端如何获取本机IP&#xff0c;轻松一步开启网络探秘之旅_彩色之外的博客-CSDN博客前端获取 本机 IP 教程https://blog.csdn.net/m0_57904695/article/details/131855907?spm1001.2014.3001.5501 在前端密码加密方案中&#xff…...

编程日记 2023/7/27 21:25:04

汽车UDS诊断深度学习专栏

1.英文术语 英文术语翻译Diagnostic诊断Onboard Diagnostic 在线诊断 Offboard Diagnostic离线诊断Unified diagnostic service简称 UDS 2.缩写表 缩写解释ISO国际标准化组织UDSUnified diagnostic service&#xff0c;统一的诊断服务ECU电控单元DTC 诊断故障码 ISO14229UD…...

编程日记 2023/7/27 21:24:02

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/7/8 20:58:51

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/9/13 17:46:40

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/8/10 2:34:22

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/8/25 23:10:09

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/9/13 2:29:19

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/8/30 5:01:00

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02