Databases
StackOverflow2013
Postsdbo
POTrying to change the background color of cell generated from a loop of JSON data using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to change the background color of cell generated from a loop of JSON data using jQuery
    text
    copied!<p>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....</p> <p>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</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery Test Stuff&lt;/title&gt; &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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 &lt; 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 = ('&lt;td class="something"&gt; ' + hospId + ' &lt;/td&gt;') 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"); } } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table id='beds' cellpadding="20"&gt; &lt;tr id="PED"&gt;&lt;td&gt;PED&lt;/td&gt;&lt;/tr&gt; &lt;tr id="MAT"&gt;&lt;td&gt;MAT&lt;/td&gt;&lt;/tr&gt; &lt;tr id="ICU"&gt;&lt;td&gt;ICU&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload