Solved

color of <tr>

Posted on 2006-11-27
22
509 Views
Last Modified: 2012-06-27
dear experts

when i view source in my code , i have something like this

<table>
 <tr id="colorstuff7">  //actually its  'colorstuff'+id

<td>
................
</td>
</table>
<table>
 <tr id="colorstuff7">  //'colorstuff'+id


<td>
................
</td>
</table>

<table>
 <tr id="colorstuff7">   //'colorstuff'+id


<td>
................
</td>
</table>

.................
i.e i have   '     <tr id="colorstuff7">    '  repeated multiple times. and i am changing the color of the <tr> in my javascript using
 if ((document.getElementById('colorstuff'+id).style.backgroundColor == "")||(document.getElementById('colorstuff'+id).style.backgroundColor == "#ffffff"))//white
            {
            document.getElementById('colorstuff'+id).style.backgroundColor ="#F1F1F1"; //change color from white to light gray
            }
but its changing the color ONLY for first <TR>.
How can i change colors for all <tr>s with same id.
or how can i put alternate colors in <tr>?

any help greatly appreciated,
thanks
J

 
0
Comment
Question by:jaggernat
  • 9
  • 5
  • 3
  • +3
22 Comments
 
LVL 23

Assisted Solution

by:rama_krishna580
rama_krishna580 earned 200 total points
ID: 18024337
Hi,

try this...Excellent example..

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>

<script>

function formatTable(oTable)
{
  var rows=document.all(oTable).rows;
  for(var i=0;i<rows.length;i++)
  {
    if(i%2==0) {
      rows[i].style.backgroundColor = "#EFFBFF";
      rows[i].style.color = "000000";
    } else {
      rows[i].style.backgroundColor = "#F2F2FF";
      rows[i].style.color = "black";
    }
  }
}

</script>
</head>

<body onload="formatTable('oTable')">

<div align="left">
  <table border="1" id="oTable" cellpadding="0" cellspacing="0"
width="60%">
    <tr>
      <td width="10%">sfd</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">ere</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
    <tr>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
      <td width="10%">&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>

R.K
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18024363
the problem with my code is all the rows <tr id="colorstuff7">  are generated dynamically.
 so you want me to remove id from  <tr id="colorstuff7">    ?
0
 
LVL 5

Expert Comment

by:Alkali_Guy
ID: 18024365
The problem is that IDs imply uniqueness - you can't have multiple objects with the same ID, so the browser just changes the first one.  To give a set of items the same colour, you can use a class, e.g.:

<style type="text/css">
.colorstuff7 { background-color: #F1F1F1; }
</style>

Then assign it:

<tr class="colorstuff7"> etc.
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18024389
so in my javascript, how do i get value of <tr class..> and then set the <tr> to the color colorstuff7 , so that <tr> gets the color #F1F1F1;  ?

thanks
J

0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18024399
without using id also as mentioned above you can use the code; if not you can use the same above function to differentiate alternative colors...

R.K
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18024412
okay.. got it
but if i use
<tr class="colorstuff7">

how should i write the javascirpt  so all rows will be the color #F1F1F1;
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18024484
If you know the no.of rows...then

try this..

<style type="text/css">
.alt { background-color:#efefef; }
</style>
<script type="text/javascript">
// Declare and populate array with content
var arrContent = new Array;
arrContent[0] = "First row";
arrContent[1] = "Second row";
arrContent[2] = "Third row";
arrContent[3] = "Fourth row";
arrContent[4] = "Fifth row";
// Declare variable and start saving table code
var strOutput = "<table>";
for(var i=0;i<arrContent.length;i++)
{  if(i%2==0)  
       // If remainder is even, output tr with class="alt"
       {  strOutput += "<tr class='alt'><td>" + arrContent[i] + "</td>";  
  }
      else  // Else, output tr with no class
      {  strOutput += "<tr><td>" + arrContent[i] + "</td>";
       }
}
// Close table
strOutput += "</table>";    
// Write out table code to HTML page
document.write(strOutput); </script>

R.K
0
 
LVL 17

Expert Comment

by:gops1
ID: 18024526
Is it JSP or ASP? Can you post only this section of your code?
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18024634
>>>If you know the no.of rows

i dont.rows are generated dynamically

>>>>code IN JSP which generates rows dynamically

 <div id="sc<c:out value='${businessArea.busAreaId}'/>" class="switchcontent" style="display:none" >
         
           
                    <c:forEach items="${businessArea.categories.arrayList}" var="category" varStatus="status">
                    <c:if test="${category.status == 'A'}">
                    <br>
                   
                    <table width="110%" id="mytable">
   <tr id="colorstuff<c:out value='${businessArea.busAreaId}'/>"> //DYNAMICALLY GENERATED ROWS,ONLY 1 <TR..>
                     <td style="border-bottom: 0px;">
                                        </a>
                     </td>
                     </tr>
                  </table>
                     
                    </c:if>
                         
                         <!--c:out value='${category.status}'/-->
                     <c:if test="${category.status == 'I'}"> <c:out value='${category.title}'/></c:if>
                  </c:forEach>
      </div>
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18024938
if i put <tr class="colorstuff7">  in jsp/html


in javascript, should i do


if ((document.getElementById(class).style.backgroundColor == "")||(document.getElementById(class).style.backgroundColor == "#ffffff"))//white
          {
          document.getElementById(class).style.backgroundColor ="#F1F1F1"; //change color from white to light gray
          }



Is the above javascript correct to change <tr> color from white to light gray?

thanks
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18024961
There are lot of ways to do it...

try to do dynamically using java and jsp...

Java Class:
public class RowBackgroundBean
{
    //~ Instance fields ........................................................

    private List classes;
    private int current;
    private int max;

    //~ Constructors ...........................................................

    public RowBackgroundBean(  )
    {
        current = 0;
        max = 2;
        classes = new ArrayList(  );
        classes.add("tableItemA");
        classes.add("tableItemB");
    }

    //~ Methods ................................................................
    /**
     * Gets Next Stylesheet classname.
     *
     * @return String representing next Stylesheet clasname.
     */
    public String getNextClass(  )
    {
        current++;
        if( current >= max )
        {
            current = 0;
        }

        return (String) ( classes.get( current ) );
    }
}


in JSP:
Put this on top of JSP as include <jsp:useBean id="rowclass" scope="request" class="com.yourpackage.RowBackgroundBean" />

And try to use the property like this...
<tr class="<jsp:getProperty name="rowclass" property="nextClass"/>"">

Declare your color properties and use it...i hope it might help you..

R.K
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 10

Author Comment

by:jaggernat
ID: 18025007
no java please...trying to avoid java. we are already over loaded with java stuff :)

0
 
LVL 10

Author Comment

by:jaggernat
ID: 18025012
my first preference is the below option:


if i put <tr class="colorstuff7">  in jsp/html


in javascript, should i do


if ((document.getElementById(class).style.backgroundColor == "")||(document.getElementById(class).style.backgroundColor == "#ffffff"))//white
          {
          document.getElementById(class).style.backgroundColor ="#F1F1F1"; //change color from white to light gray
          }



Is the above javascript correct to change <tr> color from white to light gray?

thanks
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18025018
so try using above logic... thats all i have.

R.K
0
 
LVL 2

Accepted Solution

by:
harshgrover earned 300 total points
ID: 18026050
if you have multiple fields with the same id, you should use document.getElementsByName("name");

this would return an array. then, you can use a for loop, to change the attributes for all the elements. here'z a sample code

---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
   
  </head>
<SCRIPT language="javascript">
      function testLoad(){
            //alert('hello world');
            var v = document.getElementsByName("test");
            alert(v.length);
            for(var i=0;i<v.length;i++){
            v[i].style.background='yellow';
            }
      }
</SCRIPT>
 
  <body>
    This is my HTML page. <br>
    <table>
    <tr><td id="test"> td1 </td> </tr>
    <tr><td id="test"> td2 </td> </tr>
    <tr><td id="test"> td3 </td> </tr>
    <tr><td id="test"> td4 </td> </tr>
    </table>
    <input type="button" onClick="javascript:testLoad()" value='hello world'/>
  </body>
</html>
------------------------------

when you click on the button hello world, it changes the bgcolor of all the elements with the name "test" lemee know if you need any clarifications on the above code.

~Gary
0
 
LVL 6

Expert Comment

by:aescnt
ID: 18026157
Hey, IDs are supposed to be unique! You're not supposed to use the same ID twice, that's what "class" is for!
Also harshgrover, change that id="test" to name="test" to make it work.
0
 
LVL 2

Expert Comment

by:harshgrover
ID: 18026172
nope...you dont need to change the id to name...it works fine in IE...did not check firefox though
0
 
LVL 6

Expert Comment

by:aescnt
ID: 18026182
It won't work in Firefox with `id` (I tried), and it will break HTML validation. (Actually, even 'name' will break validation, since technically not all can HTML elements can have name.)
0
 
LVL 2

Expert Comment

by:harshgrover
ID: 18026190
this should clarify the differences (or the similarities) between the two methods...

http://www.theajaxworkshop.com/index.php/Element_Name_vs_Id

as the document indicates, getElementById returns the first element, and getElementsByName returns an array of all the elements with that id/name.

hope this helps
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18028570
Actually , when i view source

i have multiple <table id="oTable" ..> in my code

like 10 tables one has 1 <tr>, other has 5<tr>s and so on.

So this below javascript is not working when there is one <tr>
function formatTable(oTable)
{
  var rows=document.all(oTable).rows;
  for(var i=0;i<rows.length;i++)
  {
    if(i%2==0)  //this condition doesnt work
{
      rows[i].style.backgroundColor = "#EFFBFF";
      rows[i].style.color = "000000";
    } else {
      rows[i].style.backgroundColor = "#F2F2FF";
      rows[i].style.color = "black";
    }
  }


how do i modify the above javascript so that it takes into consideration all the tables  <table id="oTable" ..>  and all <tr>s in it

thanks
J
0
 
LVL 6

Expert Comment

by:aescnt
ID: 18028628
Change all instances of <table id="oTable"> to <table name="oTable">, and then:

function work_on_all_oTables()
{
    var tables = document.getElementsByNane('oTable');
    for (var i in tables)
       { formatTable(tables[i]); }
}

Btw, what do you mean i%2 doesn't work? It seems okay here.

I would really refrain from using one ID more than once. This is not allowed by HTML standard, and will break in browsers like Firefox and Opera (which follows HTML specs more closely than IE). I would instead try to use the 'name' attribute, or better yet, the 'class' attribute.

(...By the way, I retract my comment saying using the 'name' attribute on elements will break validation. It seems most elements are okay with it.)
0
 
LVL 10

Author Comment

by:jaggernat
ID: 18028651
thats ok.got it running
 harsh grover, your code did the trick. thanks a million!

J
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now