How to use JavaScript and CSS to achieve the color-interlacing of text _javascript tips

Let's look at a simple method first.
Define two styles in CSS. odd{...} and. even{...} for different background colors for odd-numbered rows and even rows. After the page is loaded, get a list of labels to be discolored through JavaScript, and execute the following code:

Executes code when the file is loaded.
window.onload = function () {
 //Get <ul id= "list"/> Object
 var list = document.getElementById (' list ');
 Get all li var items below the list
 = list.getelementsbytagname (' li ');
 Traverse the items for
 (var i = 0; i < items.length i++) {
  var className = (i% 2 = 0)? ' Odd ': ' Even ';
  Items[i].classname + = ClassName; 
 }

To achieve different colors, so that the change is completely in front of the processing, will not be confused with the logic of the back end, is a better solution.
So this code is basically the way it works:

However, there are some problems with this approach:

• Only one of the specified lists can be rendered and cannot be reused
• Can not specify the starting position of discoloration, when processing the color of the table, you have to write processing
• The code is all in the OnLoad event, too high on the page

The code is improved and moved into a separate function:

/**
 * This method is used for the interlacing effect of a list, and can be flexible enough to specify the color of the interlace for the list of specified IDs. * *
 * @param ID list ID
 * @param item the label of the row to change color
 * @param odd odd Line style class name, if unspecified, the default is odd
 * @param even even row style class name , if not specified, the default is the index of the row that even
 * @param start discoloration, or, if not specified, the index of the row with the default of 0
 * @param end, 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 list
 var items = list.getelementsbytagname (item);
 
 Fixed initial position, if not a number or out of bounds, starting at 0 if
 (isnan) | | (Start < 0 | | | start >= items.length)) {
  start = 0;
 }
 
 Fixed end position, if not a number or out of bounds, then end of list if
 (isNaN) | | (End < Start | |-end >= items.length)) {End
  = items.length;
 }
 
 If odd is not specified, the default is ' odd '
 odd = Odd | | ' Odd ';
 If even is not specified, the default is ' even '
 even = even | | ' Even '; 
 
 Iterate through 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 () {
 //shading beam List1 All Li tags, using default style and starting position
 rowrender (' List1 ', ' Li ');

 The shading beam list2 all the LI tags, using the specified odd and default even, using the specified starting position
 rowrender (' List2 ', ' Li ', ' odd1 ', NULL, 2, 6);

 The shading beam table1 all the TR tags, using the specified odd and even, using the default starting position
 Rowrender (' table1 ', ' tr ', ' tr-odd ', ' Tr-even ');
 The shading beam table2 all the TR tags, 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);