English
<!--Step 1: Add the following code to the head area--> <head> <STYLE> th{background-color:#999999;} .trOdd{background-color:#FFFFFF;} .trEven{background -color:#CCCCCC;} </STYLE> <SCRIPT language="javascript"> /** * Automatically scan the table and draw the color of odd and even rows* oTable: target table oddClass: css style for odd rows evenClass: css for even rows Style*/ function setRowColor(oTable,oddClass,evenClass) { resetTableColor(oTable); for(var i=1; i<oTable.rows.length; i++) { if(i % 2 == 0) oTable.rows[i ].className = evenClass; else oTable.rows[i].className = oddClass; } } /** * added by LxcJie 2004.6.28 * Automatically scan the table and depict the color of odd and even columns * oTable: target table oddClass: odd column css style evenClass: css style for even columns*/ //more javascript from http://www.downcodes.com function setColColor(oTable,oddClass,evenClass) { resetTableColor(oTable); for(var i=1; i<oTable .rows.length; i++) { for(var j=0; j<oTable.rows[i].cells.length; j++) { if(j % 2 == 0) oTable.rows[i].cells[j ].className = evenClass; else oTable.rows[i].cells[j].className = oddClass; } } } //Clear the styles of all tr and td function resetTableColor(oTable) { for(var i=1; i< oTable.rows.length; i++) { oTable.rows[i].className = ""; for(var j=0; j<oTable.rows[i].cells.length; j++) oTable.rows[i]. cells[j].className = ""; } } </SCRIPT> <SCRIPT language="javascript"> window.changeTag = true; function init() { setRowColor(document.all.tableRow,'trOdd','trEven' ); setColColor(document.all.tableCol,'trOdd','trEven'); } function change() { if(changeTag) { setRowColor(document.all.tableCol,'trOdd','trEven'); setColColor(document .all.tableRow,'trOdd','trEven'); changeTag = false; } else { setRowColor(document.all.tableRow,'trOdd','trEven'); setColor(document.all.tableCol,'trOdd', 'trEven'); changeTag = true; } } </SCRIPT> </head> <!--Step 2: Modify the BODY content to the following content--> <body onLoad="init()"> <!-- Step 3: Add the following code to the BODY area --> <TABLE width="70%" border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="tableRow"> <TR> <TH scope="col">col1</TH> <TH scope="col">col2</TH> <TH scope="col">col3</TH> </TR> <TR> < TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD > <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR > <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> < /TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> <P> <TABLE width="70%" border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="tableCol"> <TR> <TH width=" 25%" scope="col">col1</TH> <TH width="25%" scope="col">col2</TH> <TH width="25%" scope="col">col3</ TH> <TH width="25%" scope="col">col4</TH> </TR> <TR> <TD> </TD> <TD> </TD> <TD>  ;</TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD > </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </ TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE><p> <input type="button" value=" Exchange " onClick="change()" style="border:1px solid black; "> </body> <!--Code description: Description: 1. Add onLoad="init()" to <body> and change For <body onLoad="init()"> 2. Function function init() { setRowColor(document.all.tableRow,'trOdd','trEven'); setColColor(document.all.tableCol,'trOdd','trEven '); } tableRow, tableCol is the table ID value for setting the color. setRowColor is the function for setting the color of alternate rows. setColColor is the function for setting the color of alternate columns -->
