新闻中心

基于数值和文本动态着色HTML表格：J*aScript与CSS实践教程

2025-11-19
浏览次数：次
返回列表

基于数值和文本动态着色HTML表格：JavaScript与CSS实践教程

本教程详细介绍了如何利用j*ascript和css实现html表格的动态样式控制。通过解析表格中的数值和总金额，j*ascript能够根据预设条件为满足目标的表格行添加背景色，并插入视觉标记（如对勾），从而提升数据展示的直观性和用户体验。文章将涵盖html结构、css样式定义以及核心j*ascript逻辑。

在数据展示中，尤其是在追踪进度或目标达成情况时，能够根据数据动态改变表格行的视觉样式，可以极大地提高信息的可读性和直观性。本教程将引导您完成一个实际案例，演示如何使用前端技术（HTML、CSS和J*aScript）实现这一功能：根据一个总金额，自动高亮表格中已达成的目标行，并添加一个视觉标记。

1. HTML结构：定义表格与总金额显示

首先，我们需要一个清晰的HTML结构来承载我们的数据。一个标准的表格包含（表头）和

（表体），以及用于显示总金额的元素。为了方便J*aScript访问，我们将为表格和总金额元素分配ID。
<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>$</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200.25</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h3>Total $<span id="money">200.25</span></h3>

结构说明：

  • 元素通过 id="table-id" 标识，尽管在本例中直接通过 tbody tr 选择器即可。
  • 定义了表格的列标题。
  • 包含了所有数据行。每个 代表一行数据，其中第二个 元素时，该行就会变绿。
  • .tick:after 使用 ::after 伪元素在内容后面插入一个 Unicode 对勾符号 ✓。当J*aScript将此 tick 类添加到第三个
    • 内的所有 元素，返回一个 NodeList。
  • document.querySelector('#money') 选取了显示总金额的 元素。
  • 通过 getNumber() 函数，将 中的文本内容转换为数值并存储在 total 变量中。
  • 遍历与判断：
    • rows.forEach(row => { ... }) 遍历了获取到的每一行数据。
    • 在每次迭代中，row.querySelector('td:nth-child(2)') 选取当前行的第二个
    • 元素的 classList 中，从而使其背景变为绿色。
  • tickCell.classList.add('tick')：同时，将 .tick 类添加到第三个
    • 时，能够正确覆盖整个行的背景。如果将 td 设置为背景色，.green 类可能需要更具体的选择器（如 tbody tr.green td）才能生效。
  • 用户体验： 考虑添加CSS过渡效果（如 transition: background-color 0.3s ease; 到 tbody tr），使背景色变化更加平滑。

    • 总结

    通过本教程，我们学习了如何结合HTML、CSS和J*aScript，实现一个动态的表格样式系统。这种方法不仅能使数据展示更加生动和直观，也为更复杂的交互和数据可视化奠定了基础。通过灵活运用DOM操作和CSS类，开发者可以创建出高度响应和用户友好的网页应用。

    包含目标金额，第三个 将用于显示目标达成标记。

  • 元素用于显示总金额，其中的 元素带有 id="money"，这是J*aScript获取总金额的关键。为了简化数值解析，我们移除了金额中的货币符号，并统一使用小数点作为小数分隔符。

    • 2. CSS样式：美化表格并定义动态效果

    CSS负责表格的基本外观以及动态高亮和标记的样式。我们将定义基础的表格样式，并创建两个关键的类：.green 用于背景高亮，.tick 用于显示对勾标记。

    table {
  width: 75%;
  top: 0;
}

th {
  background-color: purple;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

/* 将背景色应用于行，而非单元格，以便于动态高亮整个行 */
tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

/* 动态高亮类 */
.green {
  background-color: green;
}

/* 动态对勾标记类 */
.tick:after {
  content: '✓'; /* 使用CSS content属性插入对勾符号 */
}

    样式说明：

    • 基础样式定义了表格的宽度、表头背景色、文字颜色和字体大小。
    • 重要调整： tbody tr 被赋予了默认的背景色 #376282。这是为了确保当J*aScript添加 .green 类时，能正确覆盖整个行的背景色，而不是仅仅覆盖单元格的背景色。
    • #money 元素的样式使其在页面上更加突出。
    • .green 类简单地将背景色设置为绿色。当J*aScript将此类添加到
    元素时，该单元格将显示对勾。

    3. J*aScript逻辑：实现动态判断与样式应用

    J*aScript是实现动态行为的核心。它将负责读取总金额，遍历表格行，比较每个目标金额与总金额，并根据比较结果动态地添加或移除CSS类。

    Docky AI Docky AI

    多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作

    Docky AI 100 查看详情 Docky AI 
    // 辅助函数：从DOM元素的文本内容中提取数值
function getNumber(el) {
  return parseFloat(el.textContent);
}

// 1. 获取所有表格数据行和总金额
const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));

// 2. 遍历每一行数据
rows.forEach(row => {
  // 获取当前行的目标金额单元格和目标标记单元格
  const sumCell = row.querySelector('td:nth-child(2)'); // 第二个td是目标金额
  const tickCell = row.querySelector('td:nth-child(3)'); // 第三个td是目标标记

  // 将目标金额单元格的文本内容转换为数值
  const goalAmount = getNumber(sumCell);

  // 3. 判断目标是否达成
  if (goalAmount <= total) {
    // 如果目标金额小于或等于总金额，则认为目标达成
    row.classList.add('green'); // 为整行添加绿色背景
    tickCell.classList.add('tick'); // 为目标标记单元格添加对勾
  }
});

    J*aScript代码详解：

    1. getNumber(el) 函数： 这是一个实用函数，用于从给定的DOM元素的 textContent 中提取浮点数。parseFloat() 函数能将字符串解析为浮点数，这对于处理金额字符串非常有用。
    2. DOM元素选择：
      • document.querySelectorAll('tbody tr') 选取了表格
    （包含目标金额），row.querySelector('td:nth-child(3)') 选取第三个 （用于显示对勾）。
  • goalAmount 通过 getNumber() 函数获取当前行的目标金额。
  • if (goalAmount
  • 动态样式应用：
    • row.classList.add('green')：如果条件满足，将 .green 类添加到当前
    • 元素的 classList 中，使其显示对勾标记。

    4. 整合与注意事项

    将上述HTML、CSS和J*aScript代码整合到一个HTML文件中，并在浏览器中打开，您将看到表格根据总金额动态高亮和显示对勾的效果。

    完整代码示例：

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格高亮与状态标记</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #282c34;
            color: #f1f1f1;
        }

        table {
            width: 75%;
            border-collapse: collapse; /* 使表格边框合并 */
            margin-bottom: 20px;
        }

        th {
            background-color: purple;
            color: #f1f1f1;
            font-size: 15px;
            padding: 8px; /* 增加内边距 */
            text-align: left; /* 左对齐表头 */
        }

        tbody tr {
            background-color: #376282;
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        td {
            color: #fff;
            font-size: 15px;
            padding: 8px; /* 增加内边距 */
            text-align: center;
            border: 1px solid #444; /* 添加单元格边框 */
        }

        #money {
            background-color: gold;
            color: blue;
            font-size: 18px; /* 增大字体 */
            padding: 8px 12px; /* 增加内边距 */
            text-align: center;
            border-radius: 4px; /* 圆角 */
            display: inline-block; /* 确保背景色和内边距生效 */
        }

        /* 动态高亮类 */
        .green {
            background-color: green;
        }

        /* 动态对勾标记类 */
        .tick:after {
            content: '✓';
            color: lime; /* 对勾颜色 */
            font-weight: bold;
            margin-left: 5px; /* 与数字间隔 */
        }
    </style>
</head>
<body>

    <table id="table-id">
      <thead>
        <tr>
          <th>A/A</th>
          <th>$</th>
          <th>GOAL</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>100</td>
          <td></td>
        </tr>
        <tr>
          <td>2</td>
          <td>200.25</td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td>500</td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <h3>Total $<span id="money">200.25</span></h3>

    <script>
        // 辅助函数：从DOM元素的文本内容中提取数值
        function getNumber(el) {
          return parseFloat(el.textContent);
        }

        // 1. 获取所有表格数据行和总金额
        const rows = document.querySelectorAll('tbody tr');
        const total = getNumber(document.querySelector('#money'));

        // 2. 遍历每一行数据
        rows.forEach(row => {
          // 获取当前行的目标金额单元格和目标标记单元格
          const sumCell = row.querySelector('td:nth-child(2)'); // 第二个td是目标金额
          const tickCell = row.querySelector('td:nth-child(3)'); // 第三个td是目标标记

          // 将目标金额单元格的文本内容转换为数值
          const goalAmount = getNumber(sumCell);

          // 3. 判断目标是否达成
          if (goalAmount <= total) {
            // 如果目标金额小于或等于总金额，则认为目标达成
            row.classList.add('green'); // 为整行添加绿色背景
            tickCell.classList.add('tick'); // 为目标标记单元格添加对勾
          }
        });
    </script>

</body>
</html>

    关键注意事项：

    • 数值解析： parseFloat() 只能处理以数字开头的字符串。如果金额中包含货币符号（如$100），需要先移除这些符号，例如使用 el.textContent.replace(/[^\d.]/g, '') 进行预处理，才能正确解析。本教程中已简化HTML，直接提供纯数字。
    • 小数分隔符： 确保您的金额数据统一使用小数点作为小数分隔符（例如 100.25），而不是逗号（例如 100,25），因为 parseFloat() 默认识别小数点。
    • CSS优先级： 将 tbody tr 的背景色设置为默认值，而不是 td，是为了确保当 .green 类添加到

以上就是基于数值和文本动态着色HTML表格：J*aScript与CSS实践教程的详细内容，更多请关注其它相关文章！


# 第二个  # 乐清微网站建设  # 高尔夫运动营销推广  # 东门品牌型网站建设  # seo培训公司引流  # 高明网站建设费用  # 山西小老鼠seo  # 克什克腾网站建设  # 鞋类公众号营销推广方案  # 台州抖音关键词排名优化  # 抖音营销号推广自己可以做吗  # 转换为  # 设置为  # 这是  # 使其  # 第三个  # css  # 遍历  # 单元格  # 背景色  # 总金额  # 数据可视化  # html文件  # ssl  # 浏览器  # 伪元素  # go  # node  # 前端  # html  # java  # javascript 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： steam官方网页快速访问 steam账号注册全流程  Win11 USB传输速度慢怎么解决 Win11 USB驱动更新与设置  c++如何使用chrono库处理时间_c++标准库时间与日期操作  J*aScript中安全有效地处理localStorage字符串数据  抖音极速版最新版本 抖音极速版官方下载地址  c++中的const_cast和reinterpret_cast怎么用_c++四种类型转换  C++指针和引用有什么区别_C++内存管理核心概念深度解析  Python vgamepad库按键模拟：正确使用XUSB_BUTTON常量  VS Code远程开发时如何处理文件权限问题  铁路12306卧铺选择攻略 铁路12306下铺座位预定技巧  使用J*aScript检测输入元素是否包含在特定类中  印象笔记怎样用批量导出备知识库_印象笔记用批量导出备知识库【备份方法】  深入理解J*aScript Promise异步执行与微任务队列  Python Socket多播通信中指定源IP地址的实践指南  4399免费游戏网址入口 4399小游戏免费入口点开即玩  HTML转PPT成品工具有哪些？HTML网页转PPT成品工具大全  快手网页版在线登录 快手网页版官网入口快速访问  苹果手机如何防止被恶意App追踪  2026年CSGO开箱网站推荐 CSGO开箱平台精选  AI泡沫首次被“刺破”：GPU十年都无法存活！  HTML空白字符处理机制：渲染、DOM与编码实践  C++如何进行游戏物理模拟_使用Box2D库为C++游戏添加2D物理效果  必由学登录入口 必由学官方网站在线访问链接  Basecamp怎样用留言钉固定重点_Basecamp用留言钉固定重点【重点标记】  打开就能玩的植物大战僵尸 植物大战僵尸网页版传送门  微信商城在哪里打开【步骤】  Composer如何解决json扩展缺失的错误  Windows10怎么开启存储感知 Windows10系统设置自动清理临时文件释放C盘空间【教程】  如何在更新Composer依赖后自动运行测试_使用post-update-cmd钩子触发PHPUnit  网易大神怎么保存别人动态的图片_网易大神动态图片保存方法  QQ邮箱电脑版登录入口_QQ邮箱官方网站登录平台  html5 app怎么运行环境_配html5 app运行环境【教程】  LINUX的perf命令入门_LINUX官方性能分析工具的使用与解读  Go语言中Map值调用指针接收器方法的限制与应对  AO3网页版合集入口 Archive of Our Own同人作品浏览指南  蛙漫限时开放最深处链接_蛙漫全站漫画会员同款秒开地址  优化HTML表单样式：解决输入框焦点跳动与元素间距问题  J*aScript数组对象转换：按指定键分组与值收集  在Runstone环境中高效处理TasteDive API的JSON数据  sublime怎么设置启动时打开的窗口_sublime会话管理与热退出  《马克思佩恩3》早期版本曝光 UI设计曾多次调整！  J*aScript中向JSON对象添加新属性的正确姿势  HTML元素状态管理：根据DIV内容动态启用/禁用按钮  Win10如何清理注册表垃圾 Win10注册表维护与优化指南【慎用】  QQ邮箱网页版入口 QQ邮箱官方邮箱登录通道  126邮箱账号注册 电脑版登录入口  学习通网页版官方登录 超星学习通电脑端入口指南  Angular Material 垂直步进器：实现底部到顶部排序的教程  TikTok评论显示延迟如何处理 TikTok评论刷新优化方法  Sublime怎么配置Nim语言环境_Sublime Nim代码高亮与补全 

上一篇：J*aScript 字符串截取：substring, substr 与 slice 的区别
下一篇：J*aScript国际化_多语言实现方案

搜索