How to specify the font color based on its negative value by CSS or JavaScript?

JavaScript
1

Dear all, this is my first post in this forum. I am very new in CSS, JavaScript. Below code are working fine for me. Here I want to add one more option , that is if the any table contents value is negative then it respective text will be automatically red color other then as it is (I mean it will remain same) , below is my code actual code.


<!-- Row Highlight Javascript -->
<script type="text/javascript">
	window.onload=function(){
	var tfrow = document.getElementById('tfhover').rows.length;
	var tbRow=[];
	for (var i=1;i<tfrow;i++) {
		tbRow[i]=document.getElementById('tfhover').rows[i];
		tbRow[i].onmouseover = function(){
		  this.style.backgroundColor = '#f3f8aa';
		};
		tbRow[i].onmouseout = function() {
		  this.style.backgroundColor = '#ffffff';
		};
	}
};
</script>

<style type="text/css">
table.tftable {font-size:12px;color:#333333;width:20%;border-width:1px;border-color:#729ea5;border-collapse:collapse;}
table.tftable th {font-size:12px;background-color:#acc8cc;border-width:1px;padding:1px;border-style:solid;border-color:#729ea5;text-align:center;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {font-size:12px;border-width:1px;padding:1px;border-style:solid;border-color:#729ea5;}
</style>

<table id="tfhover" class="tftable" border="1">
<tr><th>scripts</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th></tr>

<tr><td>1STICB </td><td>5</td><td>-11</td><td>24</td><td>n/a </td></tr>
<tr><td>2NDICB </td><td>7</td><td>-15</td><td>22</td><td>n/a </td></tr>
<tr><td>3RDICB </td><td>-4</td><td>11</td><td>17</td><td>n/a </td></tr>
<tr><td>4THICB </td><td>5</td><td>11</td><td>-15</td><td>n/a </td></tr>

</table>

i have tried like below


<!-- Row Highlight Javascript -->
<script type="text/javascript">
	window.onload=function(){
	var tfrow = document.getElementById('tfhover').rows.length;
	var tbRow=[];
	for (var i=1;i<tfrow;i++) {
		tbRow[i]=document.getElementById('tfhover').rows[i];
		tbRow[i].onmouseover = function(){
		  this.style.backgroundColor = '#f3f8aa';
		};
		tbRow[i].onmouseout = function() {
		  this.style.backgroundColor = '#ffffff';
		};
	}
};
</script>

<script type="text/javascript">

$('.qty').each(function() {
    if (parseInt($(this).text()) < 1) {
        $(this).addClass('lowqty');
    }
});
</script>

<style type="text/css">
table.tftable {font-size:12px;color:#333333;width:20%;border-width:1px;border-color:#729ea5;border-collapse:collapse;}
table.tftable th {font-size:12px;background-color:#acc8cc;border-width:1px;padding:1px;border-style:solid;border-color:#729ea5;text-align:center;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {font-size:12px;border-width:1px;padding:1px;border-style:solid;border-color:#729ea5;}
</style>

<style type="text/css">

.lowqty{color:red;}
</style>

<table id="tfhover" class="tftable" border="1">

<tr> <th>scripts</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th> </tr>

<tr> <td>EBL </td> <td class="qty">-3</td> <td class="qty">5</td> <td class="qty">67</td> <td class="qty">2</td> </tr>

<tr> <td>NBL </td> <td class="qty">8</td> <td class="qty">7</td> <td class="qty">-5</td> <td class="qty">1</td> </tr>

</table>

I need all of you assistance regarding this.

2

Your code seems to be working. http://jsfiddle.net/hmpA7/

3

Hi glenngould , thanks for reply , before posting the thread, I have checked with (http://jsfiddle.net/hmpA7/), yes I agree with you , the code works very well over there , but if I use all code together in the single notepad that save as .html , doesn’t work . earlier I told I know only HTML . & very novice in this area , here what I have to know
My second code sequence is ok or not that is save as all code together as .html
Or
For CSS, should I use another notepad that saved as .CSS