How to Change the color of td in the table at runtime

Question

0.00/5 (No votes)

See more:

In my Home page calendar,when i select a date and go the next page(availability) there will so many Details in different Dates in different td in the table but i want that in which date that i had selected Date in Home page that date Details(td)have to show as selected(colorchange) in the table(td),how it is possible?
please help me sir...!

Posted 20-Jun-12 19:20pm

sunil from madras

Add a Solution

Comments

Prosan 21-Jun-12 1:29am

give this form some code

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2012-06-20T19:31:00

I would advise to use CSS with jQuery. Please see:
http://api.jquery.com/category/css/[^],
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^].

The idea is: you create two different styles for the same element, with different colors and switch from one to another using the methods .addClass(), .removeClass() or .toggleClass().

Please see the documentation with code samples I referenced above; see other CSS methods and see jQuery documentation if you need to learn about it:
http://docs.jquery.com/Tutorials[^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[^],
http://docs.jquery.com/Main_Page[^].

—SA

Mohamed Mitwalli · Answer 2 · 2012-06-20T19:36:00

Hi ,
Check this
<td runat="server" id="tdColor">

C#

protected void Page_Load(object sender, EventArgs e)
   {
       tdColor.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Red");
   }

XML

<table style="width: 100%;">
      <tr>
          <td runat="server" id="tdColor">
              &nbsp;
          </td>
          <td>
              &nbsp;
          </td>
          <td>
              &nbsp;
          </td>
      </tr>
      <tr>
          <td>
              &nbsp;
          </td>
          <td>
              &nbsp;
          </td>
          <td>
              &nbsp;
          </td>
      </tr>
      <tr>
          <td>
              &nbsp;
          </td>
          <td>
              &nbsp;
          </td>
          <td>
              &nbsp;
          </td>
      </tr>
  </table>

Best Regards
M.Mitwalli

Abdur Razique · Answer 3 · 2012-06-20T20:21:00

XML

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ricky's Solution</title>

    <!-- TO SET THE STYLES OF THE TABLE AND CELLS AS WELL -->
    <style type="text/css">
        .table1
        {
            width:500px; height:200px; text-align:center;
        }
        .cell
        {
            border:solid 1px #999;
        }
        .cell-1
        {
            border:solid 1px #999; background:#999; color:#FFF;
        }
    </style>


</head>
<body>
    <form id="form1" runat="server">
    <div align="center">

        <table class="table1">
            <tr>

                <td id="cell-1" class="cell" onclick="this.className='cell-1'">
                    1</td>

                <td id="cell-2" class="cell" onclick="this.className='cell-1'">
                    2</td>

                <td id="cell-3" class="cell" onclick="this.className='cell-1'">
                    3</td>
            </tr>
            <tr>

                <td id="cell-4" class="cell" onclick="this.className='cell-1'">
                    4</td>

                <td id="cell-5" class="cell" onclick="this.className='cell-1'">
                    5</td>

                <td id="cell-6" class="cell" onclick="this.className='cell-1'">
                    6</td>
            </tr>
            <tr>

                <td id="cell-7" class="cell" onclick="this.className='cell-1'">
                    7</td>

                <td id="cell-8" class="cell" onclick="this.className='cell-1'">
                    8</td>

                <td id="cell-9" class="cell" onclick="this.className='cell-1'">
                    9</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Hidayt Rahman · Answer 4 · 2014-04-03T00:42:00

Solution 5

Hi Guys.
I want to make changes text,images and background color on runtime using html and javascript.
Please give me some tips or any live example page.

thanks in advance !

Posted 3-Apr-14 0:42am

Hidayt Rahman

How to Change the color of td in the table at runtime

4 solutions

Solution 1

Solution 2

Solution 3

Solution 5

Add your solution here

Preview 0