Well ive got this code that creates a table from JSON data. If a specific value is true, i would like that cells color to be set to red. I feel like what i have should work, but it doesnt….
I would really like to do this with jquery if possible and im sure it is. I was able to set the entire row using my function with the class name. I was also able to get the specific cell to change when clicked. But i just cant seem to get it to set it when the page loads
<!DOCTYPE html>
<html>
<head>
<title>jQuery Test Stuff</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function() {
var info = [{"Id":1,"Text":"Changed Location B","Summary":"PED","Complete":true},
{"Id":2,"Text":"MA_HolyOke","Summary":"MAT","Complete":true},
{"Id":3,"Text":"MA_NEMC","Summary":"PED","Complete":false},
{"Id":4,"Text":"MA_South Shore","Summary":"ICU","Complete":true},
{"Id":5,"Text":"MA_NEMC","Summary":"MAT","Complete":false},
{"Id":6,"Text":"MA_NEMC","Summary":"MAT","Complete":false},
{"Id":7,"Text":"MA_NEMC","Summary":"MAT","Complete":true},
{"Id":8,"Text":"MA_NEMC","Summary":"ICU","Complete":true},
{"Id":9,"Text":"MA_NEMC","Summary":"ICU","Complete":true},
{"Id":10,"Text":"MA_NEMC","Summary":"MAT","Complete":false},
{"Id":11,"Text":"MA_NEMC","Summary":"PED","Complete":true},
{"Id":12,"Text":"MA_NEMC","Summary":"PED","Complete":false},
{"Id":13,"Text":"MA_NEMC","Summary":"MAT","Complete":true},
];
for (var i = 0; i < info.length; i++)
{
var hospId = info[i].Id;
var subText = info[i].Summary;
var hospital = info[i].Text;
var complete = info[i].Complete;
var fred = ('<td class="something"> ' + hospId + ' </td>')
if(subText == "PED")
{
$("#PED").append(fred);
}
if(subText == "MAT")
{
$("#MAT").append(fred);
}
if(subText == "ICU")
{
$("#ICU").append(fred);
}
if(complete == true)
{
//alert(fred);
$(fred).css("background-color","red");
}
}
});
});
</script>
</head>
<body>
<table id='beds' cellpadding="20">
<tr id="PED"><td>PED</td></tr>
<tr id="MAT"><td>MAT</td></tr>
<tr id="ICU"><td>ICU</td></tr>
</table>
</body>
</html>
You forgot $ in front of your markup. Should be:
fiddle: http://jsfiddle.net/Rc33n/