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更改表格單元格顏色

回答

相關問題