jquery更改表格单元格颜色
我一直试图让我自己的工作,现在已经放弃。我得到了SO和其他Google网站上的大部分代码。jquery更改表格单元格颜色
我所试图做的是改变的我的第一<td>
基于价值的background-color
我最后<td>
这是我的时刻,但我似乎无法得到任何其他颜色的工作等比第一if statement
:(
$(document).ready(function()
{
$("#tableData tr:not(:first)").each(function() {
//get the value of the table cell
var Colour = $(this).find("td:nth-child(4)").html();
alert(Colour);
//check the colour
if (Colour = "red")
{
//change the color of the background
$(this).find("td:nth-child(1)").css("background-color", "red");
}
else if (Colour = "green")
{
$(this).find("th:nth-child(1)").css("background-color", "green");
}
else if (Colour = "blue")
{
$(this).find("th:nth-child(1)").css("background-color", "blue");
}
});
});
我也为您创建了FIDDLE,看看有什么我遇到。能不能请您让我知道我怎么会有这种变化动态地根据单元格的值?
谢谢! 迈克
难道这就是你想干什么?你不需要if语句。只是Colour
值传递给background-color
这样
$(this).find("td:nth-child(1)").css("background-color", Colour);
感谢梅丽莎......对此有疑问。如果(红色,蓝色,绿色)仅仅是我想要的颜色的指示符,但是我想要使用的实际CSS颜色是'#FF6666'。我会需要我的“if语句”吗? – Mike 2014-11-04 10:20:22
嗨迈克 - 如果你不想在HTML上显示十六进制值(这就是#XXXXXX值被调用的),那么是的,你需要一个if语句。我会进一步思考。 但是,如果您不介意显示十六进制值,那么您可以执行此操作:http://jsfiddle.net/5gcvoqfn/13/ – 2014-11-04 10:28:39
以下是自定义十六进制值的if else语句版本:http:// jsfiddle.net/5gcvoqfn/14/。请注意,我只是从你的初始代码中解决了两个问题:(1)在if语句而不是'='上使用'==',因为'='是一个赋值操作符(用于赋值给变量)和'= ='是比较运算符(用于比较两个值 - 请参阅http://www.w3schools.com/js/js_comparisons.asp)(2)我在绿色和蓝色上更正了'th'到'td' else else语句以便找到第一个“td”单元。您正试图找到之前在HTML上不存在的内容。希望有所帮助! – 2014-11-04 10:40:10
=
(被赋值运算符)是不一样的==
(是比较运算符)
$(document).ready(function() {
$("#tableData tr:not(:first)").each(function() {
//get the value of the table cell
var Colour = $(this).find("td:nth-child(4)").html().trim();
//check the colour - Color has the name of the color so just set it
$(this).find("td:nth-child(1)").css("background-color", Colour);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableData" style="padding: 5px 5px;">
<tr>
<td>Name</td>
<td>dummy</td>
<td>dummy</td>
<td>colour</td>
</tr>
<tr>
<td style="border: solid 1px;">Mike</td>
<td>12</td>
<td>3</td>
<td>red</td>
</tr>
<tr>
<td style="border: solid 1px;">John</td>
<td>12</td>
<td>3</td>
<td>blue</td>
</tr>
<tr>
<td style="border: solid 1px;">Aaron</td>
<td>12</td>
<td>3</td>
<td>green</td>
</tr>
</table>
这是因为这http://jsfiddle.net/5gcvoqfn/3/
$(document).ready(function() {
$("#tableData tr:not(:first)").each(function() {
//get the value of the table cell
var Colour = $(this).find("td:nth-child(4)").html();
$(this).find("td:nth-child(1)").css("background-color", Colour);
});
});
更新的jsfiddle http://jsfiddle.net/5gcvoqfn/12/
$(document).ready(function() {
$("#tableData tr:not(:first)").each(function() {
//get the value of the table cell
var Colour = $(this).find("td:nth-child(4)").html();
alert(Colour);
//check the colour
if (Colour == "red") {
//change the color of the background
$(this).find("td:nth-child(1)").css("background-color", "red");
} else if (Colour == "blue") {
$(this).find("td:nth-child(1)").css("background-color", "blue");
} else if (Colour == "green") {
$(this).find("td:nth-child(1)").css("background-color", "green");
}
});
});
变化'='一样简单到== == – 2014-11-04 10:10:06
@JohnStephen这似乎没有任何区别。 – Mike 2014-11-04 10:11:40