js - how to change color in every html cell separately
<p>My script must display 10 lines of such information, with a digital clock in each line, a clock (countdown) showing a different time, such as f.ex. events. I want to can change a background color of html cell <code>(&lt;td id=\"".$variable_id."\"&gt;&lt;/td&gt;)</code> or color of the clock digits <code>(&lt;span id=\"".$variable_id."\"&gt;&lt;/span),</code> depending on eg 30 minutes before the event time and 30 minutes after the event time. THe $variable_id is an individual signature for every clock (one signature for one line of the event list - one clock).</p>

<p>The event list is generated from dbase via php script.</p>

<pre><code>while (){
?&gt;

&lt;tr&gt;
&lt;td&gt;&lt;?php echo $event_name; ?&gt;&lt;/td&gt;
&lt;td id ="&lt;?php echo $variable_id; ?&gt;"&gt;

&lt;?php include($catalog.'./jquery.countdown.php'); ?&gt;   
</code></pre>

<p>// js script 'inside' php file couse this way I can include a $variable_id from php into js</p>

<pre><code>&lt;span id="&lt;?php echo $variable_id; ?&gt;"&gt;&lt;/span&gt;  // place to show the clock

&lt;script&gt;
$(document).ready(function() {

    // create a new date and insert it
    var myDate = new Date(&lt;?php echo $time; ?&gt;)
    $.countdown('#&lt;?php echo $variable_id; ?&gt;', myDate);

});
&lt;/script&gt;

&lt;/td&gt;&lt;/tr&gt;

&lt;?php
}
?&gt;
</code></pre>

<p>I try to change the bg color or font color via inside js clock script (from external php file)</p>

<pre><code>    var variable_id = '&lt;?php echo $variable_id; ?&gt;'; 
    if(amount &gt; 0){document.getElementById(''+variable_id+'').style.color="#339933";} 
</code></pre>

<p>but only first clock (or only last clock) have changed digits color. Than how to change a TD bg color (or font color) in EVERY TD/SPAN, not only in one (first/last), course separately.</p>

<p>and jquery.countdown.php script</p>

<pre><code>&lt;?PHP
?&gt;
&lt;script&gt;

jQuery.countdown = function(selector, datevalue) {

        var dateFuture = datevalue;
            dateNow = new Date();
            amount = dateFuture.getTime() - dateNow.getTime();


            var variable_id = '&lt;?php echo $variable_id; ?&gt;'; 
            if(amount &gt; 0){document.getElementById(''+variable_id+'').style.color="#339933";}      //green 1800/-1800
            if(amount &lt; 0){document.getElementById(''+variable_id+'').style.color="#FF0000";}      //red
            delete variable_id;


                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

                days=Math.floor(amount/86400);//days
                amount=amount%86400;

                hours=Math.floor(amount/3600);//hours
                amount=amount%3600;         

                mins=Math.abs(Math.floor(amount/60));//minutes, wartość absolutna
                amount=amount%60;               

                secs=Math.floor(amount);//seconds               

                if(days != 0 || hours != 0){out += hours +":";}
                if(days != 0 || hours != 0 || mins != 0){out += mins;}
                out += ":"+secs;                                                        
                $(selector).html(out);

                // run it all again
                setTimeout(function() {  
                    $.countdown(selector, datevalue);
                }, 1000); 

    };

    &lt;/script&gt;
</code></pre>
