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

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

news 2026/4/3 4:53:14

 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

Linux中以其它用户身份执行脚本或命令的全总结

Linux中以其他用户身份执行命令或脚本是一个常见的需求,最近工作中碰到了这个需求,在这里简单总结一下.假如我们在root用户下想以其它用户(例如oracle,mysql)身份执行一些脚本或命令,那么有哪一些方法呢?su命令(switch user)su命令的使用方式有两种, 如下所示:切换用户只执行一…...

编程新知 2026/4/3 4:05:18

Pixel Aurora Engine镜像部署：支持RTX 3060及以上显卡的轻量级方案

Pixel Aurora Engine镜像部署&#xff1a;支持RTX 3060及以上显卡的轻量级方案 1. 项目概览 Pixel Aurora Engine是一款专为像素艺术创作设计的AI绘图工作站&#xff0c;采用复古8-bit游戏风格界面&#xff0c;让AI艺术创作变得像玩游戏一样有趣。这个轻量级解决方案特别针对…...

编程新知 2026/4/3 3:51:06

javaweb企业员工公务车辆管理系统

目录同行可拿货,招校园代理 ,本人源头供货商功能模块划分用车流程管理数据统计与报表系统管理功能技术实现要点项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能模块划分 员工管理模…...

编程新知 2026/4/3 3:49:05

微信聊天记录备份工具：守护数字记忆的安全防线

微信聊天记录备份工具&#xff1a;守护数字记忆的安全防线 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 在数字化时代&#xff0c;微信聊天记录已成为我们生活与工作的…...

编程新知 2026/4/3 3:47:03

AI Agent 系统设计方法导论

从"调用模型"到"系统工程"在当前 AI 领域&#xff0c;单纯的 Prompt Engineering 已无法满足日益复杂的业务逻辑。作为后端 AI 工程师&#xff0c;我们必须建立一个核心共识&#xff1a;"模型能力的上限决定了产品的下限&#xff0c;而架构设计的优劣…...

编程新知 2026/4/3 3:35:00

Linux下用tar.gz压缩含软连接的目录，为什么比zip更靠谱？

Linux下处理含软连接目录&#xff1a;为什么tar.gz比zip更可靠&#xff1f; 在Linux系统管理中&#xff0c;文件打包和压缩是日常操作中不可或缺的一部分。当目录结构中含有软连接&#xff08;symbolic link&#xff09;时&#xff0c;选择合适的压缩格式就显得尤为重要。许多管…...

编程新知 2026/4/3 3:35:00

快捷键失灵？让Hotkey Detective揪出幕后“键盘小偷“——专业级Windows热键冲突解决方案

快捷键失灵&#xff1f;让Hotkey Detective揪出幕后"键盘小偷"——专业级Windows热键冲突解决方案 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/4/3 3:24:48

用九齐单片机NY8B062F定时器实现精准延时与系统时基：从4ms中断到1秒计时的完整工程实践

九齐单片机NY8B062F定时器工程实战&#xff1a;构建高精度时基与延时系统 在嵌入式系统开发中&#xff0c;定时器如同设备的心跳&#xff0c;为各类功能提供精准的时间基准。九齐NY8B062F作为一款高性价比8位单片机&#xff0c;其四组灵活配置的定时器资源尤其适合小家电、智能…...

编程新知 2026/4/3 2:58:22

2026年，正规GEO优化排名公司将如何引领行业新潮流？

在AI搜索全面普及的当下&#xff0c;GEO&#xff08;生成式引擎优化&#xff09;成为企业突破曝光瓶颈的核心赛道。到2026年&#xff0c;正规GEO优化排名公司将凭借其专业能力和创新策略&#xff0c;引领行业迈向新的发展阶段。以[上海铪铪网络科技有限公司]为例&#xff0c;我…...

编程新知 2026/4/3 2:19:44

Claude Code开源第一人，竟是华人辍学博士！CC之父回应：纯手误

51万行Claude Code代码全网裸奔&#xff0c;背后泄密第一人竟是他。就在刚刚&#xff0c;CC之父回应来了&#xff1a;是人&#xff0c;不是Bun。爆出Claude Code源码第一人&#xff0c;竟被全网扒出来了&#xff01;3月31日凌晨4点23分&#xff0c;安全研究员Chaofan Shou在X上…...

编程新知 2026/4/3 1:14:40