Question

我一直试图让自己的工作，现在已经放弃了。我从SO和其他Google Googled网站上获得了大部分代码。

我要做的是根据我上次background-color

的值更改我的第一个<td>的{{1}}

这就是我现在所拥有的，但除了第一个<td>之外，我似乎无法使用任何其他颜色：（

if statement

我还为您创建了一个FIDDLE，以便了解我的体验。请你能根据单元格值让我知道我是如何动态更改的吗？

谢谢！麦克

Answer 1

这是你想要做的吗？你不需要if语句。只需将Colour值传递给background-color

即可

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

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

Answer 2

=（是赋值运算符）与==（是比较运算符）不同

$(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>

Answer 3

更新了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");
        }
    });
});

Answer 4

就像这个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);

    });
});

Jquery改变表格单元格颜色

4 个答案: