Home>

Let's look at a simple method first.

Two styles .odd {...} and .even {...} are defined in css for different background colors of odd and even rows, respectively.Get the list of tags to be changed by javascript after the page loads,Execute the following code:

//When the file loads,Execute the code.
window.onload=function () {
 //get the<ul />object
 var list=document.getelementbyid ("list");
 //Get all the li below the list
 var items=list.getelementsbytagname ("li");
 //Traverse items
 for (var i=0;i<items.length;i ++) {
  var classname=(i%2 == 0)?"odd":"even";
  items [i] .classname +=classname;
 }
}

Achieve different colors for different rows,This becomes completely processed on the front end,Not to be confused with back-end logic,Is a better solution.

Then the effect of this code is basically this:

However, there are some problems with this approach:

Can only render a specified list,Cannot be reused You cannot specify the starting position of the discoloration.When processing the discoloration of the form,Have to write specifically The code is all in the onload event, and the dependency on the page is too high

Improve its code and move it into a separate function:

/**
 * This method is used for the interlaced color changing effect of the list.
It is flexible to specify the color of the interlace for the list with the specified id.
 *
 * @param id the id of the list
 * @param item The label of the line to be colored
 * @param odd style class name for odd lines,If not specified,Defaults to odd
 * @param even Style class names for even lines,If not specified,Default is even
 * @param start The index of the line where the color changed,If not specified,Then the default is 0
 * @param end index of the end of the discolored line,If not specified,The default is the list length
 * /
function rowrender (id, item, odd, even, start, end) {
 //Get list container
 var list=document.getelementbyid (id);
 //get the list
 var items=list.getelementsbytagname (item);
 //Correct the initial position,If it's not a number or out of bounds,Then start from 0
 if (isnan (start) || (start<0 || start>= items.length)) {
  start=0;
 }
 //fix the end position,If it's not a number or out of bounds,End of list
 if (isnan (end) || (end<start || end>= items.length)) {
  end=items.length;
 }
 //If odd is not specified, it defaults to "odd"
 odd=odd || "odd";
 //If even is not specified, it defaults to "even"
 even=even || "even";
 //traverse the list and render the effect
 for (var i=start;i<end;i ++) {
  var classname="" + ((i%2 == 0)?odd:even);
  items [i] .classname +=classname;
 }
}

usage:

window.onload=function () {
 //render all li tags under beam1, use the default style and starting position
 rowrender ("list1", "li");
 //render all li tags under beam2, use the specified odd and default even, use the specified starting position
 rowrender ("list2", "li", "odd1", null, 2, 6);
 //render all tr ​​tags under beam table1, use the specified odd and even, use the default starting position
 rowrender ("table1", "tr", "tr-odd", "tr-even");
 //render all tr ​​tags under beam table2, using the specified odd and even, using the specified starting position
 rowrender ("table2", "tr", "tr-odd", "tr-even", 1);
}

Example:

table 1

rowrender ("table1", "tr", "tr-odd", "tr-even");

table 2

rowrender ("table1", "tr", "tr-odd", "tr-even", 1);
  • Previous Two Eclipse deployment dynamic web project methods
  • Next Android programming method of parsing Json format data