前端实现表格中的颜色变化以及不同点击效果

环境：

Python flask框架下的 html页面

目标：

1. 实现根据不同status显示不同颜色

2. 实现表格中对应链接根据不同状态不同点击效果

效果：

不同任务状态不同颜色显示，不同重启次数不同颜色显示，WebUi 在RUNNING状态点击跳转到对应web，其他状态则点击提示任务未运行，无法跳转

实现：

html

 <div class="card-body"><div class="table-responsive" style=""><table id="flinkRunInfo" class="table align-items-center" style=""><tbody></tbody></table></div>
</div>

js部分：

对于需要改变颜色的列需要多添加<span></span>标签，要不会把整个表格变色

第一列页面跳转的也要添加<a></a>标签来实现链接显色：

href=javaScript:void(0);表示 只保留链接的样式

{#判断运行状态来修改对应表格的css效果#}$("#flinkRunInfo td:nth-child(3)").each(function () {if ($(this).children("span:first-child").text() === 'RUNNING') {$(this).children("span:first-child").css({'color': "#fff",'backgroundColor': "#52c41a",'padding': "3px 5px",'display': 'inline-block'})} else {$(this).children("span:first-child").css({{#'color': "#fff",#}'backgroundColor': "#d9d9d9",'padding': "3px 5px",'display': 'inline-block'})}});{#判断重启次数来添加css效果#}$("#flinkRunInfo td:nth-child(4)").each(function () {{#console.log($(this).children("span:first-child").text())#}var failedNUm = $(this).children("span:first-child").text()var intFailedNum = parseInt(failedNUm){#console.log(intFailedNum)#}if (intFailedNum > 0) {$(this).children("span:first-child").css({'color': "#fff",'backgroundColor': "#ff4d4f",'padding': "3px 5px",'display': 'inline-block'})}});{#根据状态来实现不同点击效果#}$('#flinkRunInfo tbody td:nth-child(1)').on('click', function (e) {console.log($(e.target).closest('tr'))var jobStatue = $(e.target).closest('tr')[0].children[2].innerText;var joburl = $(e.target).closest('tr')[0].children[6].innerText;if (jobStatue === 'RUNNING') {window.open(joburl)} else if (jobStatue === 'CANCELLED') {window.alert("任务未运行，无法跳转"){#alert('任务未运行，无法跳转')#}}});

closest 方法返回被选元素的第一个祖先元素，这样就可以获取同一行的数据信息了

前端实现表格中的颜色变化以及不同点击效果相关推荐

html 选中变颜色变化,如何防止HTML中的选项中的颜色变化以及选中的元素在html中被选中并失去焦点？...
我有一个风格化的SELECT元素. 当我点击并元素每一个工作正常. 但是如果改变焦点,checked元素会改变颜色.如何防止HTML中的选项中的颜色变化以及选中的元素在html中被选中并失去焦点? 下 ...
艺赛旗RPA 网页处理系列（四）：网页表格中获取数据，并点击相应记录后的按钮操作说明总结
目前艺赛旗RPA已经更新到8.0版本,可以让所有用户免费下载试用http://www.i-search.com.cn/index.html?from=line1 (复制链接下载) 问题描述最近有很多 ...
cocos2d-x中实现不规则按钮的点击效果
cocos2d-x中实现不规则按钮的点击效果先说一点,这是从别人那里扒来的,亲测有效觉得不错,分享一下: 原理很简单,就是判断按钮图片的点击区域像素点透明度是不是0,需要修改源代码: 我拿coco ...
Flutter中为图片设置波纹点击效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章为图片添加水波纹点击效 ...
js的三元表达式用来替换表格中的颜色
var k1 = 3; var k2 = 0; var a = k1=='1'?'color-success':k1=='0'?'color-red':k1=='3'?'color-kejin':'' ...
java 歌词颜色变色_Axure教程：音乐播放器中，带时间的进度条/歌词颜色变化/旋转元件...
原标题:Axure教程:音乐播放器中,带时间的进度条/歌词颜色变化/旋转元件本文以QQ音乐为例,实现了带时间的进度条.歌词颜色变化.唱片旋转.暂停播放等原型交互. 一.效果展示体验地址:https ...
设置单元格填充方式_【WPS神技能】Excel表格中单元格内的双色填充效果有点意思！...
在Excel表格中做数据报表时,如果有需要重点突出的单元格数据,简单的操作自然是选中相关单元格,在"开始"菜单栏中找到"填充颜色",选择自己想要的颜色即可,如下 ...
html表格中添加背景图片不平铺,如何在让Excel表格背景不平铺？
如何在让Excel表格背景不平铺? 时间:2016-06-09来源: 网络作者: 未知点击: 次 Excel技巧:如何在让Excel表格背景不平铺? 接上期<如何在Excel表格中插入背景图片& ...
在前端中如何在表格中最后一行加入输入框_UI设计进阶干货 — 如何制定UI规范...
APP为何要制定设计规范作为UI设计师,整理设计规范也是设计能力的一种体现.但很多小公司的设计师都觉得, 整个公司只有自己一个设计师, 所有的设计稿都是自己一个人做的, 风格肯定都是统一的, 所以没 ...

前端实现表格中的颜色变化以及不同点击效果

前端实现表格中的颜色变化以及不同点击效果相关推荐

最新文章

热门文章