SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Location
    Bangladesh
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    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
    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>
    
    <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. #2
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code seems to be working. http://jsfiddle.net/hmpA7/
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  3. #3
    SitePoint Member
    Join Date
    Oct 2013
    Location
    Bangladesh
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •