• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 522
  • Last Modified:

color of <tr>

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
jaggernat
Asked:
jaggernat
  • 9
  • 5
  • 3
  • +3
2 Solutions
 
rama_krishna580Commented:
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
 
jaggernatAuthor Commented:
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
 
Alkali_GuyCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jaggernatAuthor Commented:
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
 
rama_krishna580Commented:
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
 
jaggernatAuthor Commented:
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
 
rama_krishna580Commented:
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
 
gops1Commented:
Is it JSP or ASP? Can you post only this section of your code?
0
 
jaggernatAuthor Commented:
>>>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
 
jaggernatAuthor Commented:
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
 
rama_krishna580Commented:
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
 
jaggernatAuthor Commented:
no java please...trying to avoid java. we are already over loaded with java stuff :)

0
 
jaggernatAuthor Commented:
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
 
rama_krishna580Commented:
so try using above logic... thats all i have.

R.K
0
 
harshgroverCommented:
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
 
aescntCommented:
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
 
harshgroverCommented:
nope...you dont need to change the id to name...it works fine in IE...did not check firefox though
0
 
aescntCommented:
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
 
harshgroverCommented:
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
 
jaggernatAuthor Commented:
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
 
aescntCommented:
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
 
jaggernatAuthor Commented:
thats ok.got it running
 harsh grover, your code did the trick. thanks a million!

J
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 5
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now