|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 表格行與行之間交換顏色，能用樣式表來寫嗎？
如題~手動的修改感覺很麻煩~如果表格多的話~
表格的行與行之間~~每行之間的顏色是交替的~例如一行紅色，一行藍色~ |
| 自己頂一下先~ |
[html]
<style>
.tr1{background-color:navy;}
.tr2 {background-color:pink;}
td{width:400;height:20;border:1px solid green;}
</style>
<script>
function colortd(ob) {
ob=ob.rows;
for(var i=0;i<ob.length;i++) {
if(i%2) ob(i).className="tr1";
else ob(i).className="tr2";
}
}
</script>
<center><table id=test>
<script>
for(var i=1;i<25;i++) document.writeln("<tr><td> </td></tr>");
colortd(test);
</script>
</table></center>
[/html]
在ASP裡比較簡單，只要在response.write生成表格時判斷一下就行了 |
噢謝謝~
可是為什麼在TD裡面寫入信息後，每一行的內容是都是一樣的呢？ :confused: |
for循環生成的行，當然一樣了
for(var i=1;i<25;i++) document.writeln("<tr><td> </td></tr>")用腳本生成25個行，只是一個示範
具體應用的時候仿照下例（偶可是用記事本寫的）：
[html]
<html>
<head>
<style>
.tr1{background-color:navy;color:pink;}
.tr2 {background-color:pink;color:navy;}
td{width:400;height:20;border:1px solid green;font-size:9pt;}
</style>
<script>
function colortd(ob) {
ob=ob.rows;
for(var i=0;i<ob.length;i++) {
if(i%2) ob(i).className="tr1";
else ob(i).className="tr2";
}
}
</script>
</head>
<body onload="colortd(xxx)">
<center><table id="xxx">
<tr><td>觀自在菩薩</td></tr>
<tr><td>行深般若波羅密多時</td></tr>
<tr><td>照見五蘊皆空</td></tr>
<tr><td>度一切苦厄</td></tr>
<tr><td>舍利子</td></tr>
<tr><td>色不異空</td></tr>
<tr><td>空不異色</td></tr>
<tr><td>色既是空</td></tr>
<tr><td>空既是色</td></tr>
<tr><td>受想行識</td></tr>
<tr><td>亦復如是</td></tr>
<tr><td>舍利子</td></tr>
<tr><td>是諸法空相</td></tr>
<tr><td>不生不滅</td></tr>
<tr><td>不垢不淨</td></tr>
<tr><td>不增不減</td></tr>
<tr><td>是故空中無色</td></tr>
<tr><td>無受想行識</td></tr>
<tr><td>無眼耳鼻舌身意</td></tr>
<tr><td>無色聲香味觸法</td></tr>
<tr><td>無眼界</td></tr>
<tr><td>乃至無意識界</td></tr>
<tr><td>無無明</td></tr>
<tr><td>亦無無明盡</td></tr>
<tr><td>乃至無老死</td></tr>
<tr><td>亦無老死盡</td></tr>
<tr><td>無苦集滅道</td></tr>
<tr><td>無智亦無得</td></tr>
<tr><td>以無所得故</td></tr>
<tr><td>菩提薩陲</td></tr>
<tr><td>依般若波羅密多故</td></tr>
<tr><td>心無掛礙</td></tr>
<tr><td>無掛礙故</td></tr>
<tr><td>無有恐怖</td></tr>
<tr><td>遠離顛倒夢想</td></tr>
<tr><td>究竟涅磐</td></tr>
<tr><td>三世諸佛</td></tr>
<tr><td>依般若波羅密多故</td></tr>
<tr><td>得阿褥多羅三藐三菩提</td></tr>
<tr><td>故知般若波羅密多</td></tr>
<tr><td>是大神咒</td></tr>
<tr><td>是大明咒</td></tr>
<tr><td>是無上咒</td></tr>
<tr><td>是無等等咒</td></tr>
<tr><td>能除一切苦</td></tr>
<tr><td>真實不需</td></tr>
<tr><td>故說般若波羅密多咒</td></tr>
<tr><td>即說咒曰</td></tr>
<tr><td>揭諦揭諦</td></tr>
<tr><td>波羅揭諦</td></tr>
<tr><td>波羅僧揭諦</td></tr>
<tr><td>菩提婆娑訶</td></tr>
</table></center>
</body>
</html>
[/html]
|
<body onload="colortd(xxx)">
<center><table id="xxx">
前面的XXX是樣式定義的ID嗎？可是我怎麼沒在前面看到呢？你只寫了這個呀
~function colortd(ob)
謝謝你啊~!辛苦辛苦~
|
只有<style></style>之間是在定義CSS。
光用CSS並不能方便地實現你要的效果，所以用函數colortd()為table的每一行分配樣式tr1或tr2。
xxx是table的ID。ob是函數的形參，執行的時候它代表你所指定的對象。colortd(xxx)表示函數將作用於id為xxx的對象。
也可以不用到JS（這可能是你本來希望的吧），麻煩，尤其是頁面中表格多的時候：
[html]
<style>
#tr1{background-color:navy;color:pink;}
#tr2 {background-color:pink;color:navy;}
td{width:400;height:20;border:1px solid green;font-size:9pt;}
</style>
<center><table id="xxx">
<tr id=tr1><td>觀自在菩薩</td></tr>
<tr id=tr2><td>行深般若波羅密多時</td></tr>
<tr id=tr1><td>照見五蘊皆空</td></tr>
<tr id=tr2><td>度一切苦厄</td></tr>
<tr id=tr1><td>舍利子</td></tr>
<tr id=tr2><td>色不異空</td></tr>
</table></center>
[/html] |
贊贊贊~謝謝你噢~
後面的不用JS的方法，表格多的時候是蠻麻煩的~
因為最近做的表格，都非常多，有些表格的行數還是不確定的~(不是我在寫程序~)
感覺樣式表，對於寫表格的間隔行的樣式，還是有局限性的~：)用JS或許會方便一些~
原本我以為，可以用樣式定義，簡單一些的~現在看來，還是JS好用一些~：)
謝謝~：) |
借用mozart0兄的數據∼
css 當然也可以直接定義，用expression啊：）
[html]
<html>
<head>
<style>
.test{
border:1px solid #000000;
color:#333333;
font:12px;
}
.test tr{
padding-left:5px;
height:20px;
background-color:expression(this.rowIndex%2!=1?'#efefef':'#fefefe');
}
</style>
</head>
<body >
<center><table class="test" border="0" cellspacing="0" cellpadding="0">
<tr><td>觀自在菩薩</td></tr>
<tr><td>行深般若波羅密多時</td></tr>
<tr><td>照見五蘊皆空</td></tr>
<tr><td>度一切苦厄</td></tr>
<tr><td>舍利子</td></tr>
<tr><td>色不異空</td></tr>
<tr><td>空不異色</td></tr>
<tr><td>色既是空</td></tr>
<tr><td>空既是色</td></tr>
<tr><td>受想行識</td></tr>
<tr><td>亦復如是</td></tr>
<tr><td>舍利子</td></tr>
<tr><td>是諸法空相</td></tr>
<tr><td>不生不滅</td></tr>
<tr><td>不垢不淨</td></tr>
<tr><td>不增不減</td></tr>
<tr><td>是故空中無色</td></tr>
<tr><td>無受想行識</td></tr>
<tr><td>無眼耳鼻舌身意</td></tr>
<tr><td>無色聲香味觸法</td></tr>
<tr><td>無眼界</td></tr>
<tr><td>乃至無意識界</td></tr>
<tr><td>無無明</td></tr>
<tr><td>亦無無明盡</td></tr>
<tr><td>乃至無老死</td></tr>
<tr><td>亦無老死盡</td></tr>
<tr><td>無苦集滅道</td></tr>
<tr><td>無智亦無得</td></tr>
<tr><td>以無所得故</td></tr>
<tr><td>菩提薩陲</td></tr>
<tr><td>依般若波羅密多故</td></tr>
<tr><td>心無掛礙</td></tr>
<tr><td>無掛礙故</td></tr>
<tr><td>無有恐怖</td></tr>
<tr><td>遠離顛倒夢想</td></tr>
<tr><td>究竟涅磐</td></tr>
<tr><td>三世諸佛</td></tr>
<tr><td>依般若波羅密多故</td></tr>
<tr><td>得阿褥多羅三藐三菩提</td></tr>
<tr><td>故知般若波羅密多</td></tr>
<tr><td>是大神咒</td></tr>
<tr><td>是大明咒</td></tr>
<tr><td>是無上咒</td></tr>
<tr><td>是無等等咒</td></tr>
<tr><td>能除一切苦</td></tr>
<tr><td>真實不需</td></tr>
<tr><td>故說般若波羅密多咒</td></tr>
<tr><td>即說咒曰</td></tr>
<tr><td>揭諦揭諦</td></tr>
<tr><td>波羅揭諦</td></tr>
<tr><td>波羅僧揭諦</td></tr>
<tr><td>菩提婆娑訶</td></tr>
</table></center>
</body>
</html>
[/html]
|
汗∼
我把CSS理解得淺了
其實從前也見過EXPRESSION的，沒把它當回事 |
我試圖將DIV裡li的數據也做成奇偶列顏色相間的斑馬格，水平有限，不知道如何實現。
[html]
<html>
<head>
<style>
.test{
border:1px solid #000;
color:#333;
font:12px;
}
.test ol li{
padding-left:5px;
background-color:expression(this.這裡的內容期待您出手 '#efefef':'#fefefe');
}
</style>
</head>
<body >
<div class="test">
<ol>
<li>觀自在菩薩</li>
<li>行深般若波羅密多時</li>
<li>照見五蘊皆空</li>
<li>度一切苦厄</li>
<li>舍利子</li>
<li>色不異空</li>
<li>空不異色</li>
<li>色既是空</li>
<li>空既是色</li>
<li>受想行識</li>
<li>亦復如是</li>
<li>舍利子</li>
<li>是諸法空相</li>
<li>不生不滅</li>
<li不垢不淨</li>
<li>不增不減</li>
<li是故空中無色</li>
<li>無受想行識</li>
</ol>
</div>
</body>
</html>
[/html] |
[html]
<html>
<head>
<style>
.test{
border:1px solid #000;
color:#333;
font:12px;
}
.test ol li{
padding-left:5px;
background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe');
}
</style>
</head>
<body >
<div class="test">
<ol>
<li>觀自在菩薩</li>
<li>行深般若波羅密多時</li>
<li>照見五蘊皆空</li>
<li>度一切苦厄</li>
<li>舍利子</li>
<li>色不異空</li>
<li>空不異色</li>
<li>色既是空</li>
<li>空既是色</li>
<li>受想行識</li>
<li>亦復如是</li>
<li>舍利子</li>
<li>是諸法空相</li>
<li>不生不滅</li>
<li>不垢不淨</li>
<li>不增不減</li>
<li>是故空中無色</li>
<li>無受想行識</li>
</ol>
</div>
</body>
</html>
[/html] |
| up``` |
謝謝mozart0.
不過現在又遇到一個問題了。IE5對expression似乎不支持，但在Mozilla也不能看到效果 :(
在IE6中瀏覽正常。 |
| ieko的思路不錯，如果能通過Mozilla這一關的話就好了。我對JS很菜，是不是問題出在(this.xxxxxx)？ |
兼容性...
——就是，到了NS6里也不成樣子
專業人士幫幫忙吧
|
expression 確實IE5 和NS 都不支持了∼∼
要兼容性的話，那就些個函數在onload 時候初始化 一下吧，呵呵
魚與熊掌似乎不能兼得啊 ∼ |
ieko在上個帖子中說
可否用上面的DIV寫個範例? 萬分感激!
很有潛力的一篇帖子，歡迎大家一起來總結和完善。 |
很不錯的！
謝謝了！
|
|
