從數組中檢查條件後的顏色編碼表

我想在檢查數組中的某些條件後對代碼td進行顏色編碼。除了這件作品，一切正常。以下是我有從數組中檢查條件後的顏色編碼表

<table border="0" cellpadding="0" cellspacing="0"> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Profession</th> 
    <th>Code</th> 
</table> 

var html = ""; 

$.each(arrayTest, function() { 
    html += '<tr><td>' + this.firstName + '</td>'; 
    html += '<td>' + this.lastName + '</td>'; 
    html += '<td>' + this.profession + '</td>'; 
    html += '<td class="colorType"></td><tr>'; 

    if (this.type === 'red') { 
     $('.colorType').css('background', 'red') 
    } 
    else if (this.type === 'blue') { 
     $('.colorType').css('background', 'blue') 
    } else { 
     $('.colorType').css('background', 'white') 
    } 
}); 

$('table').append(html);

這裏是我的小提琴 http://jsfiddle.net/sghoush1/J2ssK/9/

來源

2013-09-27 soum

請TR標籤中附上TH標籤。 – kristinalim

這個怎麼樣？

$.each(arrayTest, function() { 
    html += '<tr><td>' + this.firstName + '</td>'; 
    html += '<td>' + this.lastName + '</td>'; 
    html += '<td>' + this.profession + '</td>';  
    html += '<td style="background-color:' + this.type + '"></td><tr>'; 
});

Updated fiddle

你的問題是你引用一個DOM元素，.colorType，之前它被添加到DOM。

來源

2013-09-27 02:08:33

@ Chris--令人驚歎！ – soum

那是因爲之前的HTML已經被附加到表周圍的顏色你if()語句正在運行，所以元素不存在當你試圖改變他們的顏色。

相反，你可以添加風格的行內像這樣的循環內：

$.each(arrayTest, function() { 
    html += '<tr><td>' + this.firstName + '</td>'; 
    html += '<td>' + this.lastName + '</td>'; 
    html += '<td>' + this.profession + '</td>'; 
    html += '<td class="colorType" style="background:'; 

    if (this.type === 'red') { 
     html += 'red'; 
    } 
    else if (this.type === 'blue') { 
     html += 'blue'; 
    } else { 
     html += 'white'; 
    } 
    html += ';"></td><tr>'; 
});

Here is the updated jsFiddle。

來源

2013-09-27 02:05:46

@ winterblood - 這很好，直到我發現我真的不得不使用if。連接是痛苦的。我犯了錯誤，我不得不復制粘貼代碼以避免丟失字符。但它真的很清楚我的概念。感謝您這樣做 – soum

儘管我可以修改代碼以使用其他答案中顯示的更優雅的方法，但我特意這樣做了，因此如果您的顏色沒有直接轉換爲HTML顏色名稱，則會更容易處理。 'if（type ==='olive drab'）{html + ='olivedrab';} else if（type ==='off-white'）{html + ='#FFFAFA';}'。如果不需要額外的處理，我絕對推薦其他方法之一。 'if（）'也可以用'switch（）'語句替代，以獲得更優雅，更緊湊但仍然廣泛的方法。 –

@ winterblood--再次感謝..在這種情況下，我可以避免使用較小的解決方案，因爲這或多或少像一個原型，我將數組中的顏色作爲類型打印出來，但在理想世界中發生。會有一些其他的任意值，所以在這種情況下，你的解決方案是最好的解決方案。真的，你接近它的方式清除了我的概念 – soum

調用$(".colortype").css(...)設置已經在DOM中的所有匹配元素的背景。它對你正在構建的HTML字符串沒有任何作用。您需要在HTML中提供一些適當的樣式。在這裏我使用了不同的類來表示不同的顏色背景。

添加這個CSS：

.redBG { 
    background-color: red; 
} 
.blueBG { 
    background-color: blue; 
} 
.whiteBG { 
    background-color: white; 
}

，改變JS到：

$.each(arrayTest, function() { 
    html += '<tr><td>' + this.firstName + '</td>'; 
    html += '<td>' + this.lastName + '</td>'; 
    html += '<td>' + this.profession + '</td>'; 
    html += '<td class="' + this.type +'BG"></td><tr>'; 
});

FIDDLE

來源

2013-09-27 02:06:22 Barmar

@ Barmar - 這是非常聰明的 – soum

-1

的代碼無法工作，因爲你只可以操縱 'TD' 與jQuery，AFER append方法

所以試試這個：

$.each(arrayTest, function (i) { 
    html = ""; //clean up the variable 
    html += '<tr><td>' + this.firstName + '</td>'; 
    html += '<td>' + this.lastName + '</td>'; 
    html += '<td>' + this.profession + '</td>'; 
    html += '<td class="colorType_'+i+'"></td><tr>'; //put the i count, because the class cannot be duplicated 

    $('table').append(html); 

    if (this.type === 'red') { 
     $('.colorType'+i).css('background', 'red') 
    } 
    else if (this.type === 'blue') { 
     $('.colorType'+i).css('background', 'blue') 
    } else { 
     $('.colorType'+i).css('background', 'white') 
    } 
});

來源

2013-09-27 02:10:12

不推薦在這樣的循環中使用'.append（）'，因爲它比一次追加所有內容要慢，特別是當正在處理的數據量增加時。 –

@winterblood，你說的對，我總是先把連接放在一起。但是，我認爲他想每回合放一條線。抱歉。 –

從數組中檢查條件後的顏色編碼表

回答

相關問題