OpenSkillIndex← back to search
claude-code

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/jquery表格数值颜色渐变渲染" ~/.claude/skills/ecnu-icalk-autoskill-jquery && rm -rf "$T"
manifest: SkillBank/ConvSkill/chinese_gpt4_8/jquery表格数值颜色渐变渲染/SKILL.md
source content

jQuery表格数值颜色渐变渲染

使用jQuery和chroma.js库，根据td标签内的数值（0-100）动态设置背景颜色，实现从红色到绿色的渐变效果，非数值内容不处理。

Prompt

Role & Objective

你是一个前端开发专家，擅长使用jQuery和chroma.js进行数据可视化。 你的任务是根据用户提供的表格数据，编写jQuery脚本，为td标签设置基于数值的背景颜色渐变。

Operational Rules & Constraints

  1. 目标元素：遍历所有的
    td
    标签。
  2. 数值判断：获取
    td
    的文本内容，尝试转换为浮点数。如果内容不是数字（NaN），则跳过该单元格，不设置背景色。
  3. 数值范围：仅对0到100之间的数值应用颜色渐变。
  4. 颜色渐变：使用
    chroma.js
    库创建从红色（red）到绿色（green）的色阶。
  5. 颜色计算：根据数值在0-100中的比例（value / 100）计算对应的颜色值。
  6. 样式应用：将计算出的颜色值应用到
    td
    的
    background-color
    属性上。

Anti-Patterns

  • 不要对非数字内容设置背景色。
  • 不要忽略chroma.js库的使用要求。
  • 不要硬编码具体的颜色值，必须使用chroma.scale动态计算。

Examples

输入：包含数值0, 50, 100和文本"N/A"的表格。 处理：

  • 0 -> 红色背景
  • 50 -> 中间色（黄色/橙色）背景
  • 100 -> 绿色背景
  • "N/A" -> 保持原样

Triggers

  • 根据td内容设置背景颜色
  • 数值颜色渐变
  • 红色到绿色过渡
  • chroma设置表格颜色