在asp.net中ListView的交替背景顏色實現

iDotNetSpace發表於2010-02-25
ASP.NETView

在asp.net中ListView的交替背景顏色實現

GridView的處理得較多，ListView可以這樣實現，

只一行程式碼：

">

另外還有直接用js處理整個頁面中所有tr的交替色：


view plaincopy to clipboardprint?
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <title>網頁特效|Linkweb.cn/Js|---全選並改變TR顏色title>  
  5. <mce:script language="JavaScript" type="text/javascript" for="checkbox" event="onclick"><!--  
  6. tr_bgcolor(this);  
  7. // -->mce:script>  
  8. <mce:script language="JavaScript" type="text/javascript"><!--  
  9. function tr_bgcolor(c){  
  10.     var tr = c.parentNode.parentNode;  
  11.     tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';  
  12. }  
  13. function selall(obj){  
  14.     for (var i=0; i<obj.form.elements.length; i++)  
  15.     if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){  
  16.         obj.form.elements[i].checked = obj.checked;  
  17.         tr_bgcolor(obj.form.elements[i]);  
  18.     }  
  19. }  
  20. // -->mce:script>  
  21. head>  
  22. <body>  
  23. <form id="form1" name="form1" method="post" action="">  
  24. <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">  
  25. <tr><td><input name="selectall" type="checkbox" value="全選" onclick="selall(this)" />td>tr>  
  26. <tr><td>  
  27.     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">  
  28.     <tr style="background-color:#eee;" mce_style="background-color:#eee;"><td width="6%"><input type="checkbox" name="checkbox" />td><td width="94%">***********************td>tr>  
  29.     <tr><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  30.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  31.     <tr><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  32.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  33.     <tr><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  34.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  35.     <tr><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  36.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" />td><td>***********************td>tr>  
  37.     table>  
  38. td>tr>  
  39. table>  
  40. form>  
  41. body>  
  42. html>  
 

 

或

view plaincopy to clipboardprint?
  1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>表格行tr顏色交替title>  
  6. <mce:style><!--  
  7. #ab{border-collapse:collapse;width:800px;margin:10px auto;}  
  8. #ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}  
  9. .tr1{background-color:#eee;color:red;}  
  10. .tr2 {background-color:#ccc;color:blue;}  
  11. -->mce:style><style mce_bogus="1">#ab{border-collapse:collapse;width:800px;margin:10px auto;}  
  12. #ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}  
  13. .tr1{background-color:#eee;color:red;}  
  14. .tr2 {background-color:#ccc;color:blue;}style>  
  15. <mce:script type="text/javascript"><!--  
  16. function colortd(ob) {  
  17. obob=ob.rows;  
  18. for(var i=0;i<ob.length;i++) {  
  19.     if(i%2) ob(i).className="tr1";  
  20.     else ob(i).className="tr2";  
  21.     }  
  22. }  
  23. // -->mce:script>  
  24. head>  
  25. <body onload="colortd(ab)">  
  26. <table id="ab">  
  27. <tr><td>hang------------1td>tr>  
  28. <tr><td>hang------------2td>tr>  
  29. <tr><td>hang------------3td>tr>  
  30. <tr><td>hang------------4td>tr>  
  31. table>  
  32. body>  
  33. html> 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-627814/，如需轉載，請註明出處，否則將追究法律責任。

0
0
上一篇： ASP.NET頁面重新整理方法總結
下一篇： string.Empty和null三者的區別
在asp.net中ListView的交替背景顏色實現
請登入後發表評論 登入
全部評論
iDotNetSpace

註冊時間：2008-01-04

  • 博文量
    2376
  • 訪問量
    5301391

最新文章

支援我們 作者招募 使用者協議 FAQ Contact Us

北京盛拓優訊資訊科技有限公司. 版權所有  京ICP備09055130號-4  北京市公安局海淀分局網監中心備案編號：11010802021510

廣播電視節目製作經營許可證(京) 字第1234號 中國網際網路協會會員

相關文章