Implementation of alternate background color of listview in Asp.net
The gridview process a lot, and the listview can be implemented in this way,
Only one line of code:
<Tr style = "<% # (container. displayindex % 2 = 0 )? "Background-color: White;": "background-color: # eeeeee;" %> ">
In addition, JS is directly used to process the alternate colors of all tr values on the entire page:
<Html> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <br/> <title> webpage effect | Linkweb.cn/Js | --- Select and change the TR color </title> <br/> <mce: script language = "JavaScript" type = "text/javascript" for = "checkbox" event = "onclick"> <! -- <Br/> tr_bgcolor (this); <br/> // --> </mce: script> <br/> <mce: script language = "JavaScript" type = "text/javascript"> <! -- <Br/> function tr_bgcolor (c) {<br/> var tr = c. parentNode. parentNode; <br/> tr. rowIndex % 2 = 0? Tr. style. backgroundColor = c. checked? '# Add6a6': '# eee': tr. style. backgroundColor = c. checked? '# Add6d6': ''; <br/>}< br/> function selall (obj) {<br/> for (var I = 0; I <obj. form. elements. length; I ++) <br/> if (obj. form. elements [I]. type = 'checkbox' & obj. form. elements [I]! = Obj) {<br/> obj. form. elements [I]. checked = obj. checked; <br/> tr_bgcolor (obj. form. elements [I]); <br/>}< br/> // --> </mce: script> <br/> </pead> <br/> <body> <br/> <form id = "form1" name = "form1" method = "post" action = ""> <br/> <table width = "500" border = "0" align = "center" cellpadding = "0" cellspacing = "1" bgcolor = "#888888"> <br/> <tr> <td> <input name = "selectall" type = "checkbox" value = "select all" onclick = "selall (this) "/> </td> </tr> <br/> <tr> <td> <br/> <table width =" 100% "border =" 0 "cellpadding =" 0 "cellspacing =" 0 "bgcolor =" # FFFFFF "> <br/> <tr style =" background-color: # eee; "mce_style =" background-color: # eee; "> <td width =" 6% "> <input type =" checkbox "name =" checkbox "/> </td> <td width =" 94% "> **** ****************** </td> </tr> <br/> <tr> <td> <input type = "checkbox" name = "checkbox"/> </td> <td> ********************** * </td> </tr> <br/> <tr style = "background-color: # eee "mce_style =" background-color: # eee "> <td> <input type =" checkbox "name =" checkbox "/> </td> <td> ************ * ********** </td> </tr> <br/> <tr> <td> <input type = "checkbox" name = "checkbox ""/> </td> <td> *********************** </td> </tr> <br/> <tr style = "background-color: # eee "mce_style =" background-color: # eee "> <td> <input type =" checkbox "name =" checkbox "/> </td> <td> ************ * ********** </td> </tr> <br/> <tr> <td> <input type = "checkbox" name = "checkbox" "/> </td> <td> *********************** </td> </tr> <br/> <tr style = "background-color: # eee "mce_style =" background-color: # eee "> <td> <input type =" checkbox "name =" checkbox "/> </td> <td> ************ * ********** </td> </tr> <br/> <tr> <td> <input type = "checkbox" name = "checkbox ""/> </td> <td> *********************** </td> </tr> <br/> <tr style = "background-color: # eee "mce_style =" background-color: # eee "> <td> <input type =" checkbox "name =" checkbox "/> </td> <td> ************ * ********** </td> </tr> <br/> </table> <br/> </td> </tr> <br/> </table> <br/> </form> <br/> </body> <br/> </ptml> <br/>
Or
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> table row tr colors alternate </title> <br/> <mce: style> <! -- <Br/> # AB {border-collapse: collapse; width: 800px; margin: 10px auto ;}< br/># AB td {border: 1px solid # ccc; border-top: none; padding: 4px; text-align: center ;}< br/>. tr1 {background-color: # eee; color: red ;}< br/>. tr2 {background-color: # ccc; color: blue ;}< br/> --> </mce: style> <style mce_bogus = "1"> # AB {border-collapse: collapse; width: 800px; margin: 10px auto ;}< br/> # AB td {border: 1px solid # ccc; border-top: none; padding: 4 p X; text-align: center ;}< br/>. tr1 {background-color: # eee; color: red ;}< br/>. tr2 {background-color: # ccc; color: blue ;}</style> <br/> <mce: script type = "text/javascript"> <! -- <Br/> function colortd (ob) {<br/> ob = ob. rows; <br/> for (var I = 0; I <ob. length; I ++) {<br/> if (I % 2) ob (I ). className = "tr1"; <br/> else ob (I ). className = "tr2"; <br/>}< br/> // --> </mce: script> <br/> </pead> <br/> <body onload = "colortd (AB) "> <br/> <table id =" AB "> <br/> <tr> <td> hang ---------- 1 </td> </tr> <br/> <tr> <td> hang ------------ 2 </td> </tr> <br/> <tr> <td> hang ------------ 3 </td> </tr> <br/> <tr> <td> hang ------------ 4 </td> </tr> <br/> </table> <br/> </body> <br/> </ html> <br/>
Http://four-corner.appspot.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
