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，看看有什么我遇到。能不能请您让我知道我怎么会有这种变化动态地根据单元格的值？

谢谢！迈克

来源

2014-11-04 Mike

变化'='一样简单到== == – 2014-11-04 10:10:06

@JohnStephen这似乎没有任何区别。 – Mike 2014-11-04 10:11:40

难道这就是你想干什么？你不需要if语句。只是Colour值传递给background-color这样

$(this).find("td:nth-child(1)").css("background-color", Colour);

小提琴：http://jsfiddle.net/5gcvoqfn/2/

来源

2014-11-04 10:11:26

感谢梅丽莎......对此有疑问。如果（红色，蓝色，绿色）仅仅是我想要的颜色的指示符，但是我想要使用的实际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>

来源

2014-11-04 10:11:20

这是因为这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); 

    }); 
});

来源

2014-11-04 10:12:02

更新的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:16:32

jquery更改表格单元格颜色

回答

相关问题