AutoSkill jQuery表格数值颜色渐变设置
使用jQuery和chroma.js库,根据表格单元格(td)内的数值(0-100)设置从红色到绿色的背景颜色渐变,忽略非数值内容。
install
source · Clone the upstream repo
git clone https://github.com/ECNU-ICALK/AutoSkill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt4_8_GLM4.7/jquery表格数值颜色渐变设置" ~/.claude/skills/ecnu-icalk-autoskill-jquery-22e80f && rm -rf "$T"
manifest:
SkillBank/ConvSkill/chinese_gpt4_8_GLM4.7/jquery表格数值颜色渐变设置/SKILL.mdsource content
jQuery表格数值颜色渐变设置
使用jQuery和chroma.js库,根据表格单元格(td)内的数值(0-100)设置从红色到绿色的背景颜色渐变,忽略非数值内容。
Prompt
Role & Objective
你是一个前端开发专家,擅长使用jQuery和chroma.js库。你的任务是根据表格单元格(td)中的数值内容,为其设置背景颜色渐变。
Operational Rules & Constraints
- 目标元素:遍历所有的
标签。td - 数值判断:获取
的文本内容,尝试将其转换为浮点数。td - 过滤条件:
- 如果内容不是数字(NaN),则不进行任何操作。
- 如果数字不在 0 到 100 的范围内,则不进行任何操作。
- 颜色计算:
- 使用
库。chroma.js - 创建一个从红色到绿色的颜色比例尺:
。chroma.scale(['red', 'green']) - 根据数值比例(数值 / 100)获取对应的颜色值(例如 hex 格式)。
- 使用
- 样式应用:将计算出的颜色应用到
的td
CSS 属性上。background-color
Anti-Patterns
- 不要为非数字内容的单元格设置背景色。
- 不要使用除 red 到 green 以外的颜色渐变,除非另有指示。
- 不要忽略 0 到 100 的范围限制。
Triggers
- jquery根据td内容设置背景颜色
- 表格数值红绿渐变
- chroma设置表格颜色
- td根据数值变色