color of <tr>

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">    ?

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.

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

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

okay.. got it
but if i use
<tr class="colorstuff7">

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

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

Is it JSP or ASP? Can you post only this section of your code?

>>>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>

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

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

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

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

so try using above logic... thats all i have.

R.K

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.

nope...you dont need to change the id to name...it works fine in IE...did not check firefox though

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.)

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

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

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.)

thats ok.got it running
 harsh grover, your code did the trick. thanks a million!

J