gpt4 book ai didi

javascript - 如何使用 javascript 根据单元格的值更改单元格的背景颜色?

转载 作者:行者123 更新时间:2023-11-28 04:12:48 25 4
gpt4 key购买 nike

我有一个包含 3 列的表格:

  • field1 是一个类别
  • field2 和 field3 保存度量值(准确地说是整数 1、2、3、4 和 5)。

使用 Javascript,我如何有条件地设置表格中包含这些度量值的单元格(特别是 field2 和 field3)的背景颜色,使其与以下颜色相对应:

  • 有 1 的单元格是红色的
  • 有 2、3 和 4 的单元格是蓝色的
  • 有 5 的单元格是绿色的

这是我目前的所有内容(目前全部在一个 HTML 文件中,就在我整理它的时候),为了便于阅读,我将其分解。我想我可能完全缺少 HTML 中的背景属性。我知道这是可能的,但不确定如何使用 Javascript 根据其内容动态更改表格单元格的背景颜色。

提前致谢。

脚本开始

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$( "#status_report td.measure:contains('1')" ).css('background-color', '#fcc' );
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table id="status_report">
<tr>
<th>field1</th>
<th>field2</th>
<th>field3</th>
</tr>
<tr>
<td class = "measure">Example</td>
<td class = "measure">1</td>
<td class = "measure">2</td>
</tr>
</table>
</body>
</html>

更新:

一条评论指出了一个语法错误(多余的分号),该错误已被删除,上面的代码工作正常。但是,发布了一个更好的答案并已被接受。

最佳答案

您甚至可以使用 PHP 做到这一点。为什么?因为 JS 在客户端执行,如果关闭它,用户将看不到彩色单元格。

<?php 
$colors = array(
1 => "red",
2 => "blue",
3 => "blue",
4 => "blue"
5 => "green"
) ;

foreach( $data as $row ) : ?>
<tr>
<?php foreach($row as $num): ?>
<td style="background-color: <?php echo (isset($colors[(int)$num]) ? $colors[(int)$num] : "white") ; ?>"><?php echo $num ; ?></td>
<?php endforeach ; ?>
</tr>
<? endforeach; ?>

您也可以在 td 标签中使用类而不是直接样式。

如果您仍然需要使用 JQuery 的解决方案,我可以编辑我的答案。

关于javascript - 如何使用 javascript 根据单元格的值更改单元格的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15828622/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com