How to change <TD> forecolor/text color and also boder color using javascript

Question

I want to change text color and border color of <TD> element. I googled for it but not getting proper solution. when i use border-color:blue it just change 3 borders color of td but top border of td still not change i don't know why is it.

and also i want to change text color of td using java script but there is no such kind of property. Please suggest me how can i do this?

i am trying to create calender control here is my code ...

 <script id="allTemplate" type="text/raj"> 
 <tr> 


          {{if "Su" == Sunday }}  
          <td>${Sunday}</td>
          {{else}}
            {{if date.getDate() == Sunday }}
             <td id="cell${Sunday}" style="border:1px solid blue;cursor: pointer" onclick="selectDate('${Sunday}','cell${Sunday}')">${Sunday}</td>
            {{else}}
                 {{if "" == Sunday }}
                  <td>${Sunday}</td>
                   {{else}}
            <td id="cell${Sunday}" style="cursor: pointer" onclick="selectDate('${Sunday}','cell${Sunday}')">${Sunday}</td>
                   {{/if}}
            {{/if}}
          {{/if}}
          {{if "Mo" == Monday }}  
          <td>${Monday}</td>
          {{else}}
            {{if date.getDate() == Monday }}
            <td id="cell${Monday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Monday}','cell${Monday}')"><font color="Red">${Monday}</font></td>
            {{else}}
                {{if "" == Monday }}
            <td>${Monday}</td>
               {{else}}
            <td id="cell${Monday}" style="cursor: pointer" onclick="selectDate('${Monday}','cell${Monday}')">${Monday}</td>
               {{/if}}
            {{/if}}
          {{/if}}
          {{if "Tu" == Tuesday }}  
          <td>${Tuesday}</td>
          {{else}}
            {{if date.getDate() == Tuesday }}
            <td id="cell${Tuesday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Tuesday}','cell${Tuesday}')"><font color="Red">${Tuesday}</font></td>
            {{else}}
                  {{if "" == Tuesday }}
            <td>${Tuesday}</td>
                   {{else}}
            <td id="cell${Tuesday}" style="cursor: pointer" onclick="selectDate('${Tuesday}','cell${Tuesday}')">${Tuesday}</td>
                   {{/if}}
            {{/if}}
          {{/if}}
          {{if "We" == Wednesday }}  
          <td>${Wednesday}</td>
          {{else}}
            {{if date.getDate() == Wednesday }}
            <td id="cell${Wednesday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Wednesday}','cell${Wednesday}')"><font color="Red">${Wednesday}</font></td>
            {{else}}
                 {{if "" == Wednesday }}
                 <td>${Wednesday}</td>
                 {{else}}
            <td id="cell${Wednesday}" style="cursor: pointer" onclick="selectDate('${Wednesday}','cell${Wednesday}')">${Wednesday}</td>
                 {{/if}}
            {{/if}}
          {{/if}}
          {{if "Th" == Thursday }}  
          <td>${Thursday}</td>
          {{else}}
            {{if date.getDate() == Thursday }}
            <td id="cell${Thursday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Thursday}','cell${Thursday}')"><font color="Red">${Thursday}</font></td>
            {{else}}
                 {{if "" == Thursday }}
                 <td>${Thursday}</td>
                 {{else}}
            <td id="cell${Thursday}" style="cursor: pointer" onclick="selectDate('${Thursday}','cell${Thursday}')">${Thursday}</td>
                 {{/if}}
            {{/if}}
          {{/if}}
          {{if "Fr" == Friday }}  
          <td>${Friday}</td>
          {{else}}
            {{if date.getDate() == Friday }}
            <td id="cell${Friday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Friday}','cell${Friday}')"><font color="Red">${Friday}</font></td>
            {{else}}
                {{if "" == Friday }}
                <td>${Friday}</td>
                {{else}}
            <td id="cell${Friday}" style="cursor: pointer" onclick="selectDate('${Friday}','cell${Friday}')">${Friday}</td>
                {{/if}}
            {{/if}}
          {{/if}}
          {{if "Sa" == Saturday }}  
          <td>${Saturday}</td>
          {{else}}
            {{if date.getDate() == Saturday }}
            <td id="cell${Saturday}" style="border:1px solid blue; cursor: pointer" onclick="selectDate('${Saturday}','cell${Saturday}')"><font color="Red">${Saturday}</font></td>
            {{else}}
                {{if "" == Saturday }}  
            <td>${Saturday}</td>
                {{else}}
            <td id="cell${Saturday}" style="cursor: pointer" onclick="selectDate('${Saturday}','cell${Saturday}')">${Saturday}</td>
                 {{/if}}
            {{/if}}
          {{/if}}


</tr> 

</script>

this is the j query template i want to change border color of td, when condition is true it change the border color of td but only 3 edges not top one.

Raj, Please accept some answers for your previous questions. Also post what you have tried so that people can help you better. — Shoban
– Shoban, Commented Aug 17, 2012 at 11:17
Each answer to all your questions has an outlined tick - click the tick next to the answer which you found most helpful (additionally, if there are 2 answers which are useful, you might want to accept one but upvote the other 1 to signify it helped) — ChrisW
– ChrisW, Commented Aug 17, 2012 at 11:20
Rather than trying to set the styles specifically, it would probably be simpler to set a css style from JavaScript. Is your difficulty around using CSS, or JavaScript? — Richard Ev
– Richard Ev, Commented Aug 17, 2012 at 11:21
what condition? is the condition available at the td creation time? — Arun P Johny
– Arun P Johny, Commented Aug 17, 2012 at 13:41

Arun P Johny · Accepted Answer · 2012-08-17 11:26:46Z

4

I think what you are looking for is

var td = document.getElementById('something')
td.style.color="red"
td.style.border="1px solid blue"

You can see it in action here.

answered Aug 17, 2012 at 11:26

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

immutabl · Accepted Answer · 2012-08-17 11:27:45Z

0

@Raj - take a look at the Mozilla Developer site for basic information and ask questions once you have tried out a few things.

Incidentally, this is a similar approach to @Arun P Johny's answer but implemented with Jquery: http://codepen.io/5arx/pen/djhJE

answered Aug 17, 2012 at 11:27

immutabl

6,89413 gold badges47 silver badges76 bronze badges

2 Comments

Raj Over a year ago

i already googled and tried but not getting proper result so thats why i raise question here now i have update my code but still it show wrong output please see my edit question

immutabl Over a year ago

Sorry I haven't used JQuery templates so cannot comment on your implementation. If you look at the project documentation page (api.jquery.com/category/plugins/templates) you will see that:

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.

I suggest you add the JQuery tag to this question so more SO users can see it, and try and make your page using html+javascript/jquery.

ChrisW · Accepted Answer · 2012-08-17 11:35:45Z

0

If you want to do it purely in CSS, note that you need to to set the full border style on the td - if you only set the colour, only those borders which aren't affected by styles of other lines are affected (I think that understanding the full reasons behind this are fairly technical and complicated!).

In this example, the red bordered cell has 1 px solid red applied, but because the pink bordered td only has the colour specified, the bottom border (which is part of table and tr) is not affected, and so on..

answered Aug 17, 2012 at 11:35

ChrisW

5,0927 gold badges58 silver badges97 bronze badges

Collectives™ on Stack Overflow

How to change <TD> forecolor/text color and also boder color using javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related