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

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

news 2025/7/8 4:14:50

 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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/6/17 12:57:30

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/7/5 22:43:55

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/7/7 9:55:14

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/7/4 19:02:29

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/6/20 15:59:42

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/7/8 3:51:35

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/7/6 11:26:45

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/7/7 19:24:06