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

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

news 2025/12/24 3:47:41

 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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/12/22 8:38:20

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/12/21 8:32:16

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/12/23 10:10:42

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/12/23 3:09:25

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/12/21 2:54:25

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/22 9:57:58